Nested Layers

[rmagnes]

Im trying to build a rounded box with some custom gradient backgrounds that can expand and contract depending on the size or amount of content. There are three sections: 'topbox', which contains the top rounded corners of the box, 'gbox' which contains the background color, middle gradient image and content layer('cbox'), and 'bottombox', which contains the background image for the bottom rounded corners. All of these are contained within the layer 'wholebox'. The problem I am having is that I can not seem to get 'bottombox' to sit under 'topbox' and 'gbox'. Instead it shoots straight to the top of 'wholebox' and hides under 'topbox'. Any suggestions?

Here is the stylesheet portion*

#boxwhole {
margin: 0px 0px 0px 40px;
float:left;
width:500px;
overflow:hidden;

}

#topbox {
background-image:url(500slice_r1_c1.gif);
background-repeat:no-repeat;
width:500px;
height:8px;
background-position: left top;
}

#gbox {
float:left;
background-color:#EDE8A4;
background-position: left top;
background-image:url(500slice_r2_c1.gif);
background-repeat:no-repeat;
} 


#cbox {
padding: 1px 15px 15px 15px;
line-height: 1.2em; 
font-size-adjust: none; 
font-stretch: normal; 
text-align:left;
}

#gbox_bottom {
background-image:url(500slice_r3_c1.gif);
height:18px;
width:500px;
background-repeat: no-repeat
}

Here is the HTML*

<div id="boxwhole">
<div id="topbox"></div>
<div id="gbox">
<div id="cbox">
  <span class="h3">Andrew Marvell (1621-1678)</span>
  <p><span class="h2">Had we but world enough, and time,
    This coyness, lady, were no crime.
    We would sit down and think which way
    To walk, and pass our long love's day;
    Thou by the Indian Ganges' side
    Shouldst rubies find; I by the tide
    Of Humber would complain. I would
    Love you ten years before the Flood;
    And you should, if you please, refuse
    Till the conversion of the Jews.
    My vegetable love should grow
</span>by Andrew Marvell (1621-1678) </p>
<p class="h2"><span class="h2">  </span></p>
</div>
</div>
</div>
<div id="gbox_bottom"></div>
</div>

[rmagnes]

Wait I got it, I needed to put in a float-left command in on the bottom box and define width for the gbox. I would still be interested in how I could make the code more streamlined if anyone would like to give me some pointers though...