Floating Div Problem

Nested divs not displaying as I would like in Firefox

[ronniebrown]

Hi

I'm working on a site at the moment (www.160676.net) where two divs are floated within another one.

If you view the site (well, what's there at the moment) you can see that the two floating divs work ok. However, in Firefox, the outer div doesn't stretch to encompass the other two.

Can anyone point out what I've done wrong. I'm sure it's something real simple.

Thanks

RB

[Stormfx]

A floated <div> will ignore the containing element's boundaries. You'll have to set the height/width of the container to appear to encompass them.

What I mean is, say you have a box (div) and set borders on it. Then, you "float" two boxes (divs) above it, the borders on the bottom box won't affect the floating boxes because they're 'above' it.

(At least that's how I think it works :)

[edited by: Stormfx at 8:47 pm (utc) on May 6, 2005]

[Longhaired Genius]

The Firefox behaviour is correct. Floated divs are out of the "normal flow". To get the look you want: float the containing div, if you can, or put an empty unfloated div with style "clear: both;" under the two floated divs.

Welcome to Webmaster World.

[ronniebrown]

Hi

Below the two floating divs, I have <div style="clear:both;"></div> but it doesn't seem to change it.

I tried giving the container div, "main" a speficic height (e.g. 100px) and it appeared to hold the floating divs as I wanted but don't want to have to specify a specific height.

I think I'm still stuck here...

[ronniebrown]

The site should be:

www.160676.net/ss/

and not

www.160676.net

thanks

[Barbacena]

This is to do with FF’s box model. In FF float containers do not expand with their children and by having no borders or padding means that #main doesn’t have a height at all since it seems that FF does not handle percentage min-heights very well. Try setting the min-height for #main to 13px or try the following code:

#main {
background-color:#ffffff;
border-bottom:1px solid #E6E6E6;
border-left:0px solid #E6E6E6;
border-right:0px solid #E6E6E6;
border-top:0
margin-left:8px;
width:602px;
background-image: url(_img/body-bg.gif);
background-repeat: repeat-y;
background-position: right top;
}

[ronniebrown]

That works great.

Thank you very much for your help.

[Barbacena]

You're welcome.

[generalhavok]

I love this site!
I couldn't understand why my content background kept disappearing in FF. I have a div with two floated child divs in it...and when I floated the parent, the css backgrounds reappeared.

Thanks for your help!