How should i center my page?

Question

I have two parts to my site. The main body and the sidebar. The body is 6in and sidebar will probably be 200px. How do i center my page? So there is equal space on the left and right side? It should center no matter the resolution.

Using XHTML 1.0 Strict. Should work on all major browsers or at least Firefox and chrome.

Answer 1

You can set margin to auto for left and right margins:

<div id="wrapper">
  <div id="sidebar"></div>
  <div id="main"></div>
</div>

#sidebar {
    float:left;
    width: 50px;
}
#main {
    width: 150px;
    float:left;
     background-color: yellow;
}
#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

This is pretty portable too, even works on older IE versions.

Update wrapper, sidebar and main need to have widths. Google two column layout, that's a pretty standard way to do it.

http://jsfiddle.net/aXLVv/1/ - see it in action.