...

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



Spudhead
06-28-2007, 06:41 PM
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
background-color:#95d3ff;
}
#container{
width:812px;
margin:20px auto;
}
#dropshadow{
width:812px;
background:url(img/content_shadow_bg.gif) top repeat-y;
margin:0; padding:0;
}

#page{
width:779px;
margin:0px 0px 0px 22px;
}

</style>



<body>

<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>

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

</body>

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>

</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??

_Aerospace_Eng_
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

Spudhead
06-28-2007, 07:05 PM
AAAGH :D

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

Thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum