Div Height Problem in Mozilla

div height trouble causes overlap

[mst3k]

Hello. I'm having trouble getting Mozilla to give a div element a proper height. IE 6.0 gives the div a height that corresponds to its content, and everything is wonderful. Mozilla gives it esentially no height, and its contents spill out and under the page footer.

CSS:

#finis
{
margin: 0 0 0 100px;
width: 550px;
}
#finis .header
{
height: 60px;
}
#finis .content
{
padding: 54px 0 0 0;
}
#rap, #footer
{
padding: 0 ;
margin: 0 auto;
width: 760px;
}
#footer
{
clear: both;
}
#footer p
{
margin: 0;
padding: 10px 60px;
}

HTML:

<div id="rap">
<div id="content">content here</div>
<div id="finis">
<div class="header" />
<div class="content">lorem ipsum lorem ipsum</div>
</div>
</div>
<div id="footer">
footer content
</div>

The "lorem ipsum" (#rap#finis.content) winds up going under the footer, but is fine in IE. If I give #finis a fixed height, it's fine in Mozilla... however, I cannot do that, since the length of #rap#finis.content depends on each page.

<snip>

[edited by: SuzyUK at 5:46 pm (utc) on Aug. 28, 2004]
[edit reason] ooops sorry no URLS per TOS #13 [webmasterworld.com] [/edit]

[SuzyUK]

Hi ms3tk - Welcome to WebmasterWorld!

<div class="header" />

seems to be causing the problem.. is it a typo..
removing it seems to help, if it's required then it's not closed properly.

Suzy

[mst3k]

Thanks! I just figured that out myself... ha ha. I didn't realize a div couldn't be closed like <br />. Sorry for the trouble.