Solving Float Problems

By on March 8, 2005

One of the problems with using CSS to layout a page instead of tables is dealing with ‘float’ issues. For instance, the left and center columns here on Gadgetopia are floated to the left of the right-hand column. If we wanted to put a border around the whole thing, the border would only go as far down the page as the right-hand column, because floats aren’t figured in to the size of their containers.

Mezzoblue has a nice example of a new technique to solve this:

a new method of clearing floats involves using overflow: auto; to expand the parent and contain all children, thus forcing it to contain even floated elements within.

While overflow: auto is working for us in this case when it comes to vertical overflow, unfortunately it also applies to horizontal overflow as well. Therefore, all child elements must be smaller than or equal to the width of the parent, otherwise ugliness occurs.

So, on the plus side, a single css attribute can solve your float problem. On the down side, if your content gets too wide, you can crazy scroll bars. Still, another tool in the toolbox is never a bad thing.



Comments are closed. If you have something you really want to say, tweet @gadgetopia.