I often have problems with CSS floats, because I'm pretty average at all that stuff. I've never liked clearing lines or paragraphs after floated list items, because you end up with space that you don't always want. overflow:hidden often works in Firefox, but not in IE, and I never check anything in IE, so I need to completely abandon that one.
So this is my favourite option.
<style>
hr.clear { background:none; margin-top:-5px; }
</style>
<hr class="clear"/>
Works in IE and Firefox, and you can virtually get rid of the extra space altogether.
Update: This doesn't work quite as well in IE as I thought. Bugger.
When you do floats, and you have this collection of floated items, such as menu items, always put them in a containing element. Give that element the height of the items. An element with just floats in it, is 0px high, see.
It’s not hard.
Wil / 8:47am / 25 October 2006
I’m not a big fan of explicit heights. They don’t seem very robust.
Ryan / 8:51am / 25 October 2006
But usually there’s a single functional element anyway to which you can apply clear:both;
Like a footer, clearing floated columns.
Or a content div, clearing menu items.
A place where you would apply a trick is in stretching the parent of floats to the floats. But only if you can’t set that parent to float also. Because floats stretch to fit their children.
Wil / 7:50am / 26 October 2006
Yeah. That’s true. I hadn’t thought about that. That would be a better solution.
Ryan / 2:03pm / 26 October 2006
I abandoned those and used Wil’s suggestion.
Ryan / 7:27pm / 30 October 2006