Center a website using CSS

Women working at the Portland Woolen Mills

You built a great website layout which is 960px wide, and you want to centre (center for EN-US) the website using CSS instead of the dreaded <center> tag. CSS makes this really simple.

Starting with the HTML we have a div which is called wrapper which contains all the content.
[cc lang=”HTML”]

All of my content goes here

[/cc]

The CSS is used to centre the content.
[cc lang=”CSS”]
//first get rid of the padding and margin for the body
body{
padding:0;
margin:0;
}

#wrapper{
width:960px; //sets the width of the div, is required
margin: 0 auto; //sets the top and bottom to 0 and left and right to even hence the centre
}
[/cc]

Advertisements

One comment

  1. If I remember correctly, IE7/6 doesn’t support “Margin:0 auto”. Instead of using that, you will have to use “text-align:center” on a div that can wrap around the #wrapper.

    So basically:

    CSS:
    #iefix {
    text-align:center;
    }
    #wrapper {
    margin:0 auto;
    width:960px;
    text-align:left!important;
    }


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s