I notice a lot of people like to float elements all the time but don’t clear them correctly. I’ll shed a little insight on this in the future but for now, here’s a quick snippet of code that I use all the time to clear css floats.
The css snippet is as follows:
zoom:1; /* For IE 6/7 (trigger hasLayout) */
The semi-serious explanation of how and why to use this.
Most people when floating and clearing an element write code similar to the following:
The issue with this is you have to add an unnecessary empty tag everywhere. When you have a lot of elements floating you can see how this can quickly start to get frustrating.
So instead, to fix your floating woes, add the above css to your style sheet, and rework the code as follows:
<div id="parentDiv clear">
Tada! Just add the clear class to the parent div. Now you just learned an incredibly easy way to clear css floats!