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

What about setting

margin: 0px auto;

to the outermost container.

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

#wrapper { margin: 0 auto; width: 800px; }

Answer 2

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.

Answer 3

I dont think margin-left: auto; and margin-right: auto; will work. You need to have a global wrapper.

Answer 4

body {
    margin-left:  auto;
    margin-right: auto;
}