In IE6, floated columns are clearing(?) -- won't go side by side

[rickl]

Can anybody help me with this one? I have several columns in my footer, and I floated them left so that they would line up basically side by side. This works fine in Firefox, but in IE6 the columns are acting like they're clearing--they're stacking up on top of each other (not overlapping).

CSS:

#footer {
clear: both;
margin: 20px 0 0 0;
padding-bottom: 0px;
min-width: 710px;
}
#footer_content {
margin: 20px;
margin-bottom: 0px;
}

#footer .footer_column {
float: left;
margin-right: 10px;
padding: 0px 10px 0 10px;
}
#footer .footer_column ul {
width: 200px;
}
#footer .clear {
clear: both;
}



Markup:

<div id="footer">
<div id="footer_content">
<div class="footer_column">
<h4>lorem</h4>
<ul>
<li>lorem</li>
</ul>
</div>
<div class="footer_column">
<h4>lorem</h4>
<ul>
<li>lorem</li>
</ul>
</div>

<div class="footer_column">
<h4>lorem</h4>
<ul>
<li>lorem</li>
</ul>
</div>
<div class="footer_column">
<h4>lorem</h4>
<ul>
<li>lorem</li>
</ul>
</div>

<div class="clear"></div>

</div><!-- #footer_content -->
</div><!-- #footer -->

[Centauri]

That code works for me ok in IE6. Mayby there is a conflicting style rule elsewhere in the css file.

[rickl]

Thanks for taking a look, Centauri.

I finally figured out that the H4 elements were the cause of the problem. By setting a width on them (equal to the UL), it took care of the problem.

I think it had to do with expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html)?