Two columns in div - Which one to use 1) float along with margin or 2) Two floats

Question

I have two divs in a container. One is left bar and another is right bar. I need some advice/suggestions to use which method.

Method 1:

#container{ width:800px; margin:0 auto;}
#leftbar{ float:left; width:200px; }
#rightbar{ float:right: width:550px;}

Method 2:

#container{width:800px; margin:0 auto;}
#leftbar{ float:left; width:200px; }
#rightbar{ margin:0 0 0 210px; width:550px;}

Please advice which one is good practice.

Answer 1

If your container is always always always going to be 800px width then it really doesn't matter which of the two options you use. Just use the one with the least bytes per file.

But if your container gets bigger than 800px, would you want the right bar to stick to the right hand side of the container? If so, only method 1 would work.

However there is another method that achieves the same effect as method 2 which is floating both divs to the left.

Answer 2

Semantically it makes no difference since 550 + 200 ~= 800 px so you are not giving any clue what the two divs should do when e.g. the container is 1000 px.

Answer 3

Either is fine, but in Method 1 you will have a "gutter" of 50px between the divs, whereas it will only be 10px in Method 2.

Answer 4

It makes no practical difference at this stage, but the more future-proof method is the first one, since it allows you to change the width of the container later on without having to change the rightbar css to keep it fully right-aligned.

Answer 5

If you wanted to use some robust code that didn't need much thinking about, then you could use a grid-based framework such as the Yahoo User Interface, or the 960 grid.

Both offer simple-to-use CSS / HTML frameworks that enable a variety of layouts.