CSS Layout: Part I
Let’s begin with the first thing most people want their page to look like. It’s the look commonly found over at CSS Vault.
For this example, I have chosen to go with a fixed-width page of 750 pixels. To get the page
centered for IE5.x/PC, we apply text-align: center to the body tag. For all
other browsers, we apply margin: 0 auto to the wrapper <div>.
And to counteract the text from being centered within the page, text-align: left
is applied to the wrapper <div>.
<body>
<div id="wrapper">
Content in here.
</div>
</body>
body {
margin: 0; padding: 0;
text-align: center;
}
#wrapper {
margin: 0 auto;
padding: 0;
width: 750px;
text-align: left;
}
Some browsers have been known to react differently to auto margins being applied to the shorthand margin property. To correct this, auto margins must be applied to the left and right margins individually, yet I have never witnessed this problem myself.
#wrapper {
margin-left: auto;
margin-right: auto;
}
Next time we will look at the good ol’ 2-column layout. You know. Put the content on the left and the sidebar goes on the right.
Comments
body {
margin: 0; padding: 0;
text-align: center;
}
CSS, part I
don’t you mean to have a # sign in front of “body”?
—Lars
Posted by: Lars Johannesson | January 14, 2005 3:07 PM