You need to clear them. There are 3 ways to do this:
1. Use a clearing element like iWonder suggested (though his example is invalid).
2. Float the parent. Floats containing floats will automatically clear.
3. Use the method I prefer - the "clearfix" method. Excellent discussion in the article
New clearing method needed for IE7?
I ignore the added lines for IE/Mac because I don't bother supporting IE/Mac on any of my sites.
Here's what I do currently:
In main stylesheet:
Code:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
That provides clearing for all good browsers - Firefox, Safari, Opera, etc.
Then in my IE-only stylesheet:
Code:
.clearfix { height: 1%; }