Centered CSS Container

Method I am currently using for centering fixed width CSS layouts:

#container {
position: absolute;
top: 0;
left: 50%; /*puts margin starting point at the center of the page*/
width: 760px; /*this can be any width that you like*/
margin-left: -380px; /*this margin is negative one-half of the container width */

Tested in IE6, IE7, Firefox 1.5, Firefox 2.0 and Safari.


2 Responses to Centered CSS Container

  1. Montoya says:

    Resize one of those pages down below 760 pixels and see what happens… the container falls right off the side of the page. I used to do that until I realized how dangerous it is. If you want to center a container just use:

    margin: 0 auto;

    It’s the only solution that you can trust in all browsers and all resolutions.

  2. cssdiary says:

    Thanks, Montoya – good point! New revised method:

    body {
    text-align: center; /* For IE 5/Win */

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

%d bloggers like this: