#wrapper DIV background not flowing behind all DIVs

[LouPhi]

I have a #wrapper div around all my other DIVs with a background colour of white... the page background is pale grey, however the white background doesn't flow behind all divs..

See http://www.equinox-group.co.uk/new/ and you'll see what I mean...

I've tried adding a white background to the #content DIV but there is still grey showing through between the #content-left and #content-right DIVs and above the #footer DIV

Anybody have any suggestions why this is, and how I can fix it?

Thanks!

[Sorehead]

your content div isnt expanding because you have the left and right content and the footer as floating elements.

add this after your footer..

<div style="clear:left;"></div>

Your content div will now expand to the bottom of your floating divs.

[LouPhi]

Hi, I don't think thats what I meant... the contend DIV doesn't need to expand, I want the white background which is set on the wrapper to be the background for all elements within #wrapper.

Adding <div style="clear:left;"></div> after the footer merely made the content expand further down in IE, the non-background white issue is still there in Firefox and Safari...

I appreciate the help thou' - but if you know how I can fix this I'd be very grateful!

Thanks
LP

[Sorehead]

Hi,

Sorry, i wasnt looking at the source properly, put a clearing div like i showed you, at the bottom of the code just before the #wrapper closes, this will sort out your problem.

:)

[LouPhi]

You beauty!!

Thanks so much... I will remember this for the future :O)

Cheers
LouPhi

[ray326]

I can't get to your example page but it sounds like a float clearing problem. If so then another alternative is to make the wrapper div overflow:hidden.

[LouPhi]

Yes I like that... that seems a little tidier somehow (no offence sorehead - your solution worked too :O)

Thanks very much

LouPhi

[Sorehead]

Hi,

While overflow:hidden works as intentded, I dont use it because it throws up bugs when using min-height hacks in IE6.
Where you have content that actually exceeds the min-height, this wouldnt be visible using the overflow method as the the element wouldnt expand to show the full content.

Just giving you a heads up, incase you are using min-heights and dont know whats going wrong :)

[LouPhi]

Oh right - thanks! I am using min-height on a couple of DIV's so I'll test it to see if I get any problems.

Thanks again
LP

[Centauri]

When setting min-height, the usual IE6 hack is to feed it the explicit height. If also using overflow:hidden to force good browsers to enclose floats, also feed IE6 overflow:visible along with the explicit height.