CSS center positioning problem

[mattg2k4]

What I want to do is position the content section of the page in the middle of the browser window (below the title bar) fixed at 600px wide with a different background color from the rest of the page and a black 1px border around it. I have the whole section I want to position thusly inside a

with a corresponding entry in the linked CSS file.

While typing this post I decided to do some more googling, and in the process I answered my own question with This CSS tricks page

I just need to enclose it in a container given these properites:

{
   width: 600px;
   margin: 0 auto;
   border: 1px solid black;
}

Which will make the browser insert margins equally around the content, thus centering it. This is actually something I'd been puzzling over for some time since a previous webpage I made, so I hope some people here find it useful.

• Share
  • Share this post on
  • Digg
  • Del.icio.us
  • Technorati
  • Twitter

[mairving]

Could also be done quite easily with tables.

[mattg2k4]

That's true, and it's how I originally did it, but I wanted to do it with CSS so it would be easy to change later on all of the different pages that will be in this project, which is of course one of the great things about CSS.

[J.K. Bowman]

Hey Matt..

Ya want to center a DIV? - Try this in your CSS

margin-right: auto;
margin-left: auto;

[mattg2k4]

Thanks J.K. but that is functionally the same as margin: 0 auto;, because it makes the top and bottom margins = 0, and the left and right margins = auto.

The shorthand method for setting margins is margin: top right bottom left;, if one is specified, all margins are that one, if two or three are specified, then the missing ones are inferred from the margin opposite them (ie left=right and top=bottom).