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.
Time Required: 10 minutes
- 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.
- Add automatic margins to center your div.
- To fix it for Netscape 4, and IE 4 - 6(quirks mode) add a text-align on the body.
- But then all the text inside is centered, so re-align the text in your #main div by adding text-align: left; in there.
- Save your page and your style sheet.
- Test in several Web browsers.
- This will center the layout box but not the content within it. Use text-align to center the inner content.