Simple two column html layout without using tables

Answer 1

I know this question has already been answered, but having dealt with layout a fair bit, I wanted to add an alternative answer that solves a few traditional problems with floating elements...

You can see the updated example in action here.

http://jsfiddle.net/Sohnee/EMaDB/1/

It makes no difference whether you are using HTML 4.01 or HTML5 with semantic elements (you will need to declare the left and right containers as display:block if they aren't already).

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

    
I have updated this example to show a great way of getting a two column layout.


    

        
The columns are in the right order semantically
        
You don't have to float both columns
        
You don't get any odd wrapping behaviour
        
The columns are fluid to the available page...
        
They don't have to be fluid to the available page - but any container!
    

There is also a rather neat (albeit newer) addition to CSS that allows you to layout content into columns without all this playing around with divs:

column-count: 2;