Floated class content will not stay in in Div

[roamingwayne]

I've got a page where I'm replacing the tables by using nested div tags and float. The vertical size of the div is not changing to hold all the content. I got it to work in IE but in foxfire I have to add the height element to the div to see any content. I've tried to set the margin, padding, and border to get around the problems of margin-collapsing with no luck. Any ideas would be helpfull.

Thanks

Here is the html
<div id="valistheade r">
<span class="valisthe adername"><b>Co urse Name</b></span>
<span class="valisthe adernote"><b>Co urse Note</b></span>
<span class="valisthe aderdate"><b>Da te</b></span>
<span class="valisthe aderbutton">&nb sp;</span>
<span class="valisthe aderbutton">&nb sp;</span>
</div>

This is the css
#valistheader {clear:both;dis play:block; padding: 2px 0px 2px 0px;background: #003366;border-bottom: 1px solid #FF6600;text-align:left;colo r:#ffffff;}
.valistheaderna me {float:left;wid th: 40%;}
.valistheaderno te {float:left;wid th: 40%;}
.valistheaderda te {float:left;wid th: 10%;}
.valistheaderbu tton {float:left;wid th: 5%; }

[drhowarddrfine]

Firefox is performing correctly. What you are seeing in IE is a bug. Divs are NOT to contain floated or absolutely positioned elements.

To get modern browsers to do what IEs bug is doing, google for "clear floats". You can try adding overflow:auto; to the parent div and see if it does the job for you.