Weird things with float

[Cronthenoob]

So This is what i've got.

<div class="outerdiv"> <div class="innerdiv">  <div class="content">   <div class="left"></div>   <div class="left"></div>   <div class="right"></div>   <div class="right"></div>  </div </div></div>

In IE the innerdiv stretches to the size of the content.In FF the innerdiv only stretches to the size of the viewport.If the user has to scroll down in FF, the part that was originally hidden, has no background.Heres my CSS:

html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; height:100%;}.outerdiv {width:100%;height:100%;margin:auto;}.innerdiv {background-image:url('../images/gradient_bg.gif');width:800px;height:100%;margin:auto;float:none;}.content {background-color:transparent;width:600px;margin:auto;}.banner {background-image:url('../images/banner_bg.gif');background-repeat:no-repeat;width:608px;height:103px;margin:auto;float:left;}.left { width:435px; position:relative; float:left;}.right { width:160px; position:relative; float:right;}

I suspect it has something to do with the float, and it takes the dives that are floating outside of their container.

[aspnetguy]

can you post a link..I can't seem to figure it out without the background images

[Cronthenoob]

Sure.The Test Page in Question.

[aspnetguy]

the backgrounds are not working in FF

[Cronthenoob]

Yep, thats the problem.

[boen_robot]

That happens with IE7 and Opera 9 as well, so it might be IE6's fault (why am I not surprised?).Perhaps giving the fixed background "background-attachment: fixed;"?

[Cronthenoob]

I tried this:background-attachment:fixed;background-position:center;background-repeat:repeat-y;No luck.

[aspnetguy]

Yep, thats the problem.

I mean when I load your link in FF it is just a big gray background...the image backgrounds are not showing at all.Anyways try this

<div class="outerdiv"><div class="innerdiv">  <div class="content">   <div class="left"></div>   <div class="left"></div>   <div class="right"></div>   <div class="right"></div>	<br style="clear:both"/>  </div></div></div>

[Cronthenoob]

Try it now . . . I think I fixed it.I put the background image on the html, body style and added center position and background repeat-y on it.

html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; background-image: url('../images/gradient_bg.gif'); background-position:center; background-repeat:repeat-y;}

Before I had the background image in a different div.

[aspnetguy]

nothing...the backgrounds show fine in IE and Opera but not FF, wierd...try the code change I suggested.EDIT: NVM...I am a dumba$$. AdBlock was blocking images from your site for some reason...I whitelisted you and it works fine.So how about the real problem does the clearing <br> work?

[Cronthenoob]

Ok, I added it, try it now :)I've got IE and FF running, and FF is showing the background images fine for me.

[aspnetguy]

worked like a charm...*blows smoking gun* yup it just needed a little persuasion

[Cronthenoob]

The original CSS html, body style:

Heres my CSS:

html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; height:100%;}

And I changed it to this:

html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; background-image: url('../images/gradient_bg.gif'); background-position:center; background-repeat:repeat-y;}

and now it works fine! :)I also completely took away the innerdiv.Thanks for the help :)P.S. What does the <br style="clear:both"> do anyways?

[aspnetguy]

clear has 3 options :left,right,both (since you have elements floating left andd right I used both).Basically when you float an element, it floats out of its container unless you use a clearing <br> before you close the container holding the floated elements.IE seems to do this automatically while FF and Opera follow the standard and require you to place the clear in the code.

[Cronthenoob]

Makes sense!Thx!