rmagnes
06-16-2007, 06:38 AM
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>
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>