The Coast is Clear

Not long after I updated my CSS, a reader pointed out that when resizing text, the content column would “jump” to the right, overlapping the sidebar. Not good.

The problem: I needed to clear the floats that enable the navigation to be horizontal. This didn’t seem to be a problem in my old, positioned layout. But when floats are used to lay out the columns that follow the navigation, not clearing can cause bizarre issues.

The solution: Adding a simple clear: left; to the #content declaration (since this <div> follows the navigation) solved the text resizing issue.

Something to keep in mind if you’re using a floating layout, along with an unordered navigation list that also uses float.

So… clear, clear, clear.

Also see Containing Floats from Eric Meyer for more ways to… you guessed it, contain floats.