As I am working on customizing the look-and-feel of this blog site (thanks to WordPress for some great work!), I came across a CSS problem. The problem involved using a “floating” div layer. In Figure 1 below, you can see that the floating blog text area div layer (box with blue-gray border) floats right over the main container (box with red border). The sidebar nav layer is not floating and causes the container div to extend down based on the height of the sidebar nav layer.

Now you can see how this causes a problem. The blog text div creates an empty gap where the background now displays (in the figures, the bg is light gray). Note: the problem was displaying in Firefox; it showed up correctly in IE 6. The problem should be addressed nevertheless. So always be sure to test your layouts in all browsers.

How do we fix this you ask? Well, Figure 2 shows how I used another div layer (displayed as a box w/ a green border) to push down the container div down to the correct height. The following style was used to create the “cleared” div layer.

.cleared {
clear:both;
height:1px;
overflow:hidden;
}

Since we want the new div layer to appear below the floating blog div layer, I applied the “clear” property. The clear property is used if you don’t want the next element to wrap around the floating objects. clear: left will clear left-floated elements, clear: right will clear right-floated elements and clear: both will clear both left and right floated elements.

I read somewhere that the overflow:hidden style must be used since IE refuses to automatically make div tags < 1em high (Standards Compatible mode. )

Update: One of my friends gave me a link to an easier way to accomplish this.
The link is http://www.positioniseverything.net/easyclearing.html