Centre Content Horizontally in Page

Question

I would like to display all my content in a div that is 800px wide, centred in the page. That way, all browser window widths are catered for. How do I go about doing that?

Answer 1

Set your div CSS as follows:

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

Answer 2

I would also recommend adding text-align:left; to the container div and adding text-align:center; to the body tag. Reason being that Internet Explorer 6.0 will not handle the auto margins.

body {
      text-align:center;}

#container {
      margin: 0px auto;
      text-align:left;
      width: 800px;}