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="valistheader">
<span class="valistheadername"><b>Course Name</b></span>
<span class="valistheadernote"><b>Course Note</b></span>
<span class="valistheaderdate"><b>Date</b></span>
<span class="valistheaderbutton">&nbsp;</span>
<span class="valistheaderbutton">&nbsp;</span>
</div>

This is the css
#valistheader {clear:both;display:block; padding: 2px 0px 2px 0px;background: #003366;border-bottom: 1px solid #FF6600;text-align:left;color:#ffffff;}
.valistheadername {float:left;width: 40%;}
.valistheadernote {float:left;width: 40%;}
.valistheaderdate {float:left;width: 10%;}
.valistheaderbutton {float:left;width: 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.