Nested Div's In Mozilla

Problems setting a parent DIV in Mozilla

[DVDerek]

I did a search and was able to find this old thread that I cannot reply to (it's too old):

[webmasterworld.com...]

I am havving a similar problem on my site. I have:

<div id="wrapper">
 <div class="clear"></div>
 <div id="main">
This is some text inside main
 </div>
 <div id="sidebar">
This is some text in the sidebar
 </div>
 <div class="clear"></div>
</div>

Here is the acompanying CSS

#wrapper {
 background-color: #ddd;
 position: relative;
 width: 700px;
 top: 0px;
 left: 0px;
}
#wrapper {
 background: #ddd url(/images/adjuster.gif) repeat-y 0px 0px;
}
#wrapper .clear{
 clear: both;
 height: 0px;
 font-size: 0px;
 line-height: 0px;
}
#main {
 float: left;
 padding: 15px 0px 15px 10px;
 margin: 0px 0px 0px 0px;
 width: 515px;
 line-height: 1.4em; 
}
#sidebar {
 float: right;
 color: #666;
 width: 153px;
 margin: 0px;
 border: none;
 padding: 15px 2px 30px 10px;
}

In IE, I get one parent DIV which has a background image that houses the two nested divs. Looks exactly how I want it to. However, in Mozilla the parent div is collapsed and the nested divs are positioned correctly, but have no background.

I read in that previous thread the trick about the setting the div's with clear before and after the nested divs. However, everything is still collapsed. If I put REAL TEXT before and after everything is fine, but I don't want to have any text show up.

Workarounds? For clarification, the Mozilla I am using is Firebird 0.6.1 which is based off of Mozilla 1.x (4, I believe).

[Birdman]

I think you can use <div class="clear">&nbsp;</div>.

[SethCall]

btw, from PapaBear I learned about setting
in your style.css file (the html class part)

html
{
height:100%;
width:100%;
}
body
{
top:0px;
padding:0px;
margin: 0px;
font-family: verdana,arial,sans-serif;
height:100%;
width:100%;

}

In Mozilla 1.4+, (maybe 1.3 too), u have to set html width and height to 100%. In Mozilla 1.3- and IE 6.0, you also need the body width and height set to that.

Try that and see what happens. It fixes alot of issues with div's not sizing as they should.

[SuzyUK]

Hi DVDerek Welcome to WW

try this thread on containing floats [webmasterworld.com] (msg#4)

this solution should work in Moz.

Suzy