This is one of those absurd situations that result in far too much effort and stress (if you ask me). It goes like this: You want to create a layout with a couple columns. Those columns are set inside your “container” with a pretty background color or nice border. Wrap a couple <div> elements, float one left, the other right, and add your border/color. Right? Check it out in IE and things look as you expect. But when you look at the results in Firefox, you’ve lost your background! Or that distinguishing border is now lumped at the top as a single, less-than-appealing line! What happened?
There are countless solutions to this available via the normal searching mechanisms. I have to give credit to my first encounter of the solution I like the best: a “Background height problem” forum post with the solution being the very first response. The <img> element at the bottom of poster’s content could be modified with the “clear: both” style applied to it. The solution also points to this excellent article, “Clearing a float container without source markup“, which goes into some great detail (a must read).
So here’s my quick tutorial on the matter. For this to be worth while, you’ll need to be following along in Firefox. And again, for more details, please read the “Easy Clearing” article linked to above.
»»» but wait, there’s more reading to do »»»




