Floating Divs And Container Height Fix

Almost any web designer meets at the beginning some frequent problems when using floating layouts. We know that if we want to use two or more columns in our web design, we should use floating layout. That means that we have a container div and two or more floating divs inside.

What is the problem?

The web design world doesn't act like a graphic design sketch, and sometimes we are dealing with complicated issues just to place a small element. Our container div doesn't get any height setting because we want it to be a flexible; we want it to be depended on the floating column's height. By default, the container won't get any height, it will be 0px height and the columns will flow out of the box.

Here comes the big design problem. The next div, right after the last div in the line (usually it will be the "float: right;" div), will stick to the container div without considering the floating divs height. You have no idea how your design looks right now.





You can see in the image above how the red div stuck to the top of the container, together with the floated divs.

The solution

The problem is floating, so the solution is floating. If the container won't be stretched together with its floating content, we will force it with non-floated div. After we finish the entire floating layout we place a clear div right before we are closing the container, its style will be "clear: both;". This way we get non-floating element, and the container will have to stretch its height to merge with the end of it.

Shorter solution

Another way to fix this is to add "overflow: auto;" to the container (no need clear div). This way we force the container to act as a flexible element. In old versions of IE it won't get this as a layout, so we add width to the container to tell the browser it's a layout div.





Now you can see how the container wrapping the floated divs, the bottom div can get full visibility now.