PDA

View Full Version : div order


Hunter86
02-11-2009, 04:11 PM
on the following code why is the the div that has the repeating background placed at the top of the divs containing top and bottom corner images?
<div id="content">
<div class="middle">
<div class="top">
<div class="bottom">
<div class="body">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>
</div>
</div>
</div>
cheers
dan

bee80
02-11-2009, 05:43 PM
which div has the repeating background?

Hunter86
02-11-2009, 06:01 PM
sorry the div class middle

bee80
02-11-2009, 06:06 PM
because u have the top , bttm and bdy divs inside the middle div and also inside the content div.

bee80
02-11-2009, 06:09 PM
try this :


<div id="content">
<div class="top"></div>
<div class="middle">
<div class="body">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>
</div>
<div class="bottom"></div>
</div>



ps you dont need the body div if u just having 3 boxs

Hunter86
02-11-2009, 07:06 PM
thanks, the code i had works fine but i was under the impression as the top and bottom divs are inside the middle, it would be the middles bg repeated throught the div? So how come the image slices are being constructed correctly with the divs in the wrong order? when i try to use your code the images break apart when content is added here is my css [code]
# content{
margin:0 auto;
background:#3CC;
width:951px;
position:relative;


}

.top{
background: url(images/topbox.gif) no-repeat;
display:block;
width:946px;
padding-top:32px;
overflow:hidden;
}

.bottom{
overflow:hidden;
background: url(images/bottomgf.gif) no-repeat 0 100%;
display:block;
width:886px;
padding: 0 30px;
padding-bottom:31px;
}

.middle{

background:url(images/middle1px.gif);
background-repeat:repeat-y;
width:946px;
}
.body{
float:left;
width:886px;
position:relative;
}
[/css]