How to Center a Fixed Layout Page with CSS
Added: March 23rd, 2007 (tagged with: coding, css)
While I do not like Fixed Layout pages, I do have to create them from time to time. When I do, I usually end up creating an "Ice Layout" (a fixed layout that centers in the browser window). I have never liked the "container" method of centering content on a page (setting the text-align: center; on the body and margin: 0px auto; text-align: left; on a div#container element). It contains unnecessary code in both the CSS and HTML of my page content.
Since I am always working in (and identify) the Strict Doctype in my pages, this kind of centering is obsolete. If you are using a Fixed Layout, set the width of your page in the body element: body { width: 720px; }. Then, use auto margins to center the page: body { margin: 0px auto; }. Finally, if you are using positioned elements, set the body's position as relative: body { position: relative; }. This last bit of code ensures positioned elements will be relative to body instead of html (as it is in Internet Explorer).
So, instead of having an extra div in your code to handle centering of Fixed Layout pages, you can cleanly accomplish the same effect (if you adhear to the Strict Doctype).
Final CSS Implementation:
body { width: 720px; margin: 0px auto; position: relative; }
Center your pages with CSS and remove unnecessary HTML in your code.
Verified in:
- Mozilla Firefox 1.5
- Mozilla Firefox 2.0
- Internet Explorer 6.0
- Internet Explorer 7.0
- Apple Safari 1.2
- Opera 9.10
