using div/css is this possible?

[radar]

Okay I have a design i'm working on, and im attempting to use div's/css for all the layout and styling options.  My problem is i have never used div's before so i don't quite grasp the concept of their nesting, and the css formatting...

 

Yesterday I had 3 divs.. a main div with an absolute position, and 2 inner div's with a relative position.  while my CSS made everything display correctly -- i had a blank space at the bottom of the screen about 4 inches high (as tall as one of the images)...  I finally gave up on that and made that second div part of the background image and got rid of it all together.

 

So with the image attached, can anyone give me a sample of how i would design that using div's with some basic css?

 

I can and will slice the image up however I need to..  the grey center part would need to auto expand with the body....  and i'll also be adding another grey box (without any images), right below this one.

 

any help is appreciated because i'm freaking lost...  the imagemainbox.jpg is the main box i need to format -- the other image is the entire 'body' how it looks.  the little dollar sign icons on the left, and the bubble on the right are both part of the background image of the page with an absolute position.  the main box, the lower box, and the secondary box on the right i'm unsure how to get setup right.  so if anyone can help me understand, i would appreciate it.

 

[attachment deleted by admin]

[linus72982]

Okay I have a design i'm working on, and im attempting to use div's/css for all the layout and styling options.  My problem is i have never used div's before so i don't quite grasp the concept of their nesting, and the css formatting...

 

Yesterday I had 3 divs.. a main div with an absolute position, and 2 inner div's with a relative position.  while my CSS made everything display correctly -- i had a blank space at the bottom of the screen about 4 inches high (as tall as one of the images)...  I finally gave up on that and made that second div part of the background image and got rid of it all together.

 

So with the image attached, can anyone give me a sample of how i would design that using div's with some basic css?

 

I can and will slice the image up however I need to..  the grey center part would need to auto expand with the body....  and i'll also be adding another grey box (without any images), right below this one.

 

any help is appreciated because i'm freaking lost...  the imagemainbox.jpg is the main box i need to format -- the other image is the entire 'body' how it looks.  the little dollar sign icons on the left, and the bubble on the right are both part of the background image of the page with an absolute position.  the main box, the lower box, and the secondary box on the right i'm unsure how to get setup right.  so if anyone can help me understand, i would appreciate it.

 

I had a hard time following what you are trying to do, but let me explain what I think you're getting at.  The reason, most likely, you had an "invisible" div at the bottom that just happened to be the same size as one of your images is that relative positioning keeps the div right where it always was, it just displays it elsewhere.  For example, if you have a layout of something like:

<div id="div1">

<div id="div2">

and they had no special formatting whatsoever, they would display on the top left, div2 under div1.  Now, if you relative positioned div 2 to display to the right of div1 and then tossed a div3 in the code, there would be an "invisible" div between div1 and div3 (it's actually div2, even though it doesn't show up there, it still takes up page space exactly where it always was).  To prevent this, you can just absolutely position things (this takes it out of the normal flow of the page so it doesn't, in fact, take up any space, as it were).

 

As for helping you along with divs and css, this may help you a bit: think of divs as mini windows.  Whatever divs you "nest" inside of a div will display within that div just as it might if that outer div were a browser window.  So, for example, if you place a bunch of positioned divs on a page without nesting any of them, if you then nest them in a parent div, the parent div then essentially becomes the browser window and everything is positioned according to it.  So if you center a div in a div, it is centered according to the div, not the page, make sense?

[linus72982]

I got to thinking about it more and decided I'd show you how I'd design the page you showed with CSS.

 

I'm doing this according to your first image there.  It appears you have three main divs you can work with.  First, you have a wrapper, this will encompass everything else and it can limit the width of your displayable content.  Place everything in these div tags.  Then you have two columns, left and right.  You can then place your divs inside of these "columns".  Something like this:

 

<div id="wrapper">

  <div id="leftColumn">

      <img src="buyNowPicture" />

      <div id="topBlock"></div>

      <div id="middleBlock"></div>

      <div id="bottomBlock"></div>

  </div>

  <div id="rightColumn">

      <img src="mainHeader" />

      <div id="mainViewableArea"></div>

      <span id="viewableBottomText"></span>

  </div>

</div>

 

Now for the CSS:

 

#wrapper:

  {width: 900px;

  max-width: 900px;

  min-width: 900px;

  margin: 0 auto;}

#leftColumn

  {width: 300px;

  float: left;}

#topBlock

  {width: 280px;

    height: 200px;

    margin: 0 auto;}

#middleBlock

    {width: 280px;

    height: 230px;

    margin: 0 auto;}

#bottomBlock

    {width: 280px;

    height: 150px;

    margin: 0 auto;}

#rightColumn

  {width: 600px;

    float: left;}

#mainViewableArea

    {width: 580px;

    height: 500px;

    margin: 0 auto;}

#viewableBottomText

    {text-align: center;

    font-size: 16px;

    font-weight: bold;}

 

You get the picture.  Basically, what you need to know is you have two columns, they are floated left, and then a wrapper that encompasses both and centers everything on the page.  You can add background images as necessary to show the borders of the blocks and such.