Centre aligning a block element using CSS

If you want to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS code:


#content
{
width: 700px;
margin: 0 auto
}


You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the center of the screen. Simple... well not quite - we have still got the pre-IE 6 versions on PC to worry about, as these browsers won't center align the element with this CSS command. You'll have to change the CSS rules:


body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}



<p>This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted <code>text-align: leftcode> into the content div.p>