Creating two columns layout - html/css semantics

Question

I want to create a very simple liquid layout with 2 columns - the one to the left will have a fixed width, and the one to the right will be dependent to the window size.

Answer 1

The best method to have two/more columns in a layout is:

• float the N-1 of columns
• set margin to the other one

HTML

LEFT
RIGHT
​

CSS

div#left{
    float:left;
    width:200px;
    min-height: 400px;
    background-color: magenta;
}
div#right{
    margin-left: 210px;
    min-height: 400px;
    background-color: yellow;
}
​

take a look here

EDIT:

• body is the High-level container which contains all the element is passed to the view. sometimes we need to position or form our whole elements in the page, without changing the position of each one comparing to each others. so being an element called container could be useful.