Container div and backround

[Tivurr]

I have a container div with a background image (tiled). Inside this container I have a div for top, left, right, middle and bottom. These divs are transparent - but my problem is that they show the background from the body, and NOT from the container div. (Well, in IE it seems to be right - but in Firefox or Opera it doesn't.)

<!-- HTML -->
<div id="layout_container">
 <div id="layout_top">
 <p>
  Heres the top div!
 </p>
 </div>
 <div id="layout_left">
 <p>
  &nbsp;
 </p>
 </div>
 <div id="layout_middle">
 <p>
  &nbsp;
  <br><br><br>
 </p>
 </div>
 <div id="layout_right">
 <p>
  &nbsp;
 </p>
 </div>
 <div id="layout_bottom">
 <p>
  Bottom...
 </p>
 </div>
</div>
/* CSS */
body, td 
{
font-family : Verdana, Arial, sans-serif ;
font-size : 11px;
margin: 0;
text-align: center; 
background-color: White;
}
div, p
{
margin: 0;
padding: 0;
}
#layout_container
{
margin-left: auto;
margin-right: auto;
width: 905px;
text-align: left;
background-image: url(../images/temp_background.gif);
}
#layout_top
{
background-color: Aqua;
height: 70px;
width: 900px;
}
#layout_left
{
left: 10px;
top: 170px;
width: 200px;
float:left;
}
#layout_middle
{
width: 500px;
float: left;
}
#layout_right
{
right: 10px;
top: 170px;
width: 200px;
float:left;
}
#layout_bottom
{
background-color: Black;
color: White;
text-align: center;
font-size: 9px;
width: 900px;
height: 13px;
float: left;
}

[Robin_reala]

Welcome to WebmasterWorld Tivurr!

When you float elements they can protrude out of their parent container. Because all of the children of #layout_container are floated it’ll close up to the minimum possible height. There’s a simple fix though. If you remove the float:left from #layout_bottom and instead make it clear:left then it’ll always move below the above floating elements. This will prop #layout_container open (as there’s a non-floating child at the bottom) and show its background.

The reason why this currently works in IE is due to a bug. IE has a concept of hasLayout [satzansatz.de] which is worth reading up on. In this case, the ‘width’ that you assign to #layout_container is triggering this state; one of the side-effects is that elements with hasLayout always contain their floating children which is the behaviour you’re seeing here.

Hope this helps.

[edited by: Robin_reala at 10:17 am (utc) on Jan. 16, 2007]

[Tivurr]

Thank you very much! This did the trick! :-)