Align page center using CSS

[boneyard]

[Wickham]

Your #container div needs a width as well as margin: auto; to centralise; I've chosen 500px but you should edit it to be just enough for the content.

 

Yours divs inside #container are position: absolute; so the #container needs to have position: relative; so that the position: absolute divs take the top and left positions from the top left corner of the div where they can adjust with the centering of the div and not from the top left corner of the window where they would be fixed.

 

#container { width: 500px; position: relative;

margin: 0 auto;

}

 

Edit: your first div has left: 9px; width: 293px; and the dark red div has left: 302px; (293 + 9) width: 179px, totalling 481px so that should be the width of #container, except that you still have the 9px space on the left so you may want to make the green div left: 0; make the dark red div left: 293px; and make #container 472px wide.

Edited May 27, 2009 by Wickham

[boneyard]

Awesome!!! That worked like a charm! Thank you so much...I think I am going to go celebrate! Cheers to you!