Creating a 2 Column Layout in CSS

Question

I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.

I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?

After adding "clear:left" and "clear:right" to each table, it appears as follows...

After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.

Answer 1

For each float left, add clear:left, for each float right, add clear: right.

It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.

EDIT: a working example: http://cssdesk.com/Xan5j

Answer 2

It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.