Fixed width layouts can be hard to center with some of the popular browsers out there, but it is possible, with only a few lines of code.
Difficulty: Average
Time Required: 10 minutes
Here's How:
- Create a new Web page with a CSS style sheet in your HTML editor.
- Create a div element as the main element on the page where you'll store everything on the page.
- Give that div element an ID that is unique on the page.
- Open your CSS style sheet and set the width of your div element.
div#main {
width: 750px;
} - Add automatic margins to center your div.
div#main {
width: 750px;
margin-left: auto;
margin-right: auto
} - To fix it for Netscape 4, and IE 4 - 6(quirks mode) add a text-align on the body.
body {
text-align: center;
} - But then all the text inside is centered, so re-align the text in your #main div by adding text-align: left; in there.
div#main {
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;
} - Save your page and your style sheet.
- Test in several Web browsers.
Tips:
- This will center the layout box but not the content within it. Use text-align to center the inner content.
