View Full Version : floating child divs removes parent div bg image?

06-28-2007, 06:41 PM
<style type="text/css">
font-family:Arial, Helvetica, sans-serif;
margin:20px auto;
background:url(img/content_shadow_bg.gif) top repeat-y;
margin:0; padding:0;

margin:0px 0px 0px 22px;



<div id="container"><img src="img/content_shadow_top.gif" width="812" height="22" alt="drop shadow" /><div id="dropshadow">

<div id="page">

<img src="img/nav_header.gif" alt="Nav header" width="156" height="205" />

<div><img src="img/banner_468x60.gif" alt="banner" /></div>


</div><img src="img/content_shadow_bottom.gif" width="812" height="240" alt="drop shadow" /></div>


Ok, so: that gives me a centered, 812-pixel wide "container" box, with a drop shadow all the way around. Inside that is a 779-pixel wide "page". Into that div, I start chucking elements.

Now, with the code above, the banner element appears immediately below the nav_header image. Which is wrong - I want the banner image to be floated immediately to the right of the nav_header image.

But as soon as I float those two images:

<div id="page">

<img src="img/nav_header.gif" alt="Nav header" width="156" height="205" style="float:left;width:156px;" />

<div style="float:left;width:470px;"><img src="img/banner_468x60.gif" alt="banner" /></div>


... then although the banner goes where it should, in Firefox 2 the page div loses the bg image (content_shadow_bg.gif - this is a 812px wide, 1px high repeating image with about 20px of fading gradient either side: a drop shadow).

What the...? It's fine in IE6. It passes validation. Why is FF losing the bg image if I float those child elements? Is is a bug? Is it my CSS? How do I fix it??

06-28-2007, 06:44 PM
Its not a bug. It is your CSS, and IE6 is showing it incorrectly. You need to clear your floats. www.positioniseverything.net/easyclearing.html

06-28-2007, 07:05 PM

Of course it's the floats. I ALWAYS forget to clear the d*mn floats... :rolleyes:

Thanks :)