css box not expanding in FF or background not showing

[fspeier]

Hello,
shows properly in IE7 but not in FF. the #container does not seem to wrap around #layouttop and #footer, or at least the #container background (contenthorizontal.jpg) does not show in FF. Here is the relevant html and CSS:

<div id="container">
<div id="layouttop">
</div>
<div id="maincontent">
</div>
<div id="footer">
</div>
</div>

#container {
background-image: url(parts/contenthorizontal.jpg);
background-repeat: repeat-y;
width: 785px;
margin-left: -390px;
position: relative;
left: 50%;

}
#layouttop {
background-image: url(parts/contentheader.jpg);
background-repeat: no-repeat;
height: 700px;
width: 785px;
background-position: top;
float: left;
}
#maincontent {
margin-top: -420px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 785px;
float: left;
}

#footer {
background-image: url(parts/FOOTER.gif);
background-repeat: no-repeat;
clear: both;
height: 100px;
width: 785px;
background-position: bottom;
position: relative;
bottom: 0px;
float: left;
}

I just dont get it. I am sure I am missing something fundamental.
Thanks for any input.
fs

[Insanity]

I'm a noob on this stuff, so I may be sending you completely incorrect information, but in my experience using "id='something'" instead of "class='something'" in my DIV tags seems to always give me problems, usually in IE, not FF, but I thought I might suggest it. Hope it helps.

Also, I don't understand the difference between using a "#" and using a "." to define your classes, but I always use ".". Maybe that's something to look at too?

[swa66]

You seem to have floated all that is inside the div. Floats are outside the flow and hence the div has nothing left in it to render. Expected and intended behavior.

That leaves the questions: why float them, they are so wide it makes little sense...

Added:
To stretch a div add something (anything) under the floats, do not float it, and make is "clear" the floats.

[edited by: swa66 at 9:33 pm (utc) on Mar. 8, 2008]

[swa66]

I'm a noob on this stuff, so I may be sending you completely incorrect information, but in my experience using "id='something'" instead of "class='something'" in my DIV tags seems to always give me problems, usually in IE, not FF, but I thought I might suggest it. Hope it helps.

Also, I don't understand the difference between using a "#" and using a "." to define your classes, but I always use ".". Maybe that's something to look at too?

<p id="foo"> is selected with #foo
<p class="bar"> is selected with .bar

id-s are only allowed once in a file, and you can only apply one id on an element (you can apply multiple classes: <p class="foobar bar">)

[fspeier]

swa66,

thanks, you are absolutely right. i starrted with a floated layout because i was going to have different column widths etc, but now i am nesting the actual layout into the maincontent div, so i was able to remove the floats.
also thank you for reminding me of the option to clear with an unfloated div.
thanks everyone for replying.
fs