Centre Your Site
Lets get the css section cracking with perhaps the most often asked question of them all!!
‘How do I centre my site regardless of the screen resolution?’
Let’s start by defining the width we would like our content to be. For this example I’ve chosen 780px. We need to ‘wrap’ all of our content in a container 780px wide.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Centre Your Site</title> </head> <body> <div id="wrapper"> <!- - Site Content Here - -> </div> </body> |
CSS
1 2 3 | #wrapper { width:780px; } |
We then centre the #wrapper by using auto values for the left and right margins
1 2 3 4 | #wrapper { width:780px; margin:0 auto; } |
However, IE needs a little more help than this. For IE we have to use text-align:center on the body tag and then override it in the wrapper (if you want your text aligned to the left of course)
1 2 3 4 5 6 7 8 | body { text-align:center; } #wrapper { width:780px; margin:0 auto; text-align:left; } |
And that’s all there is to it!
Leave a Comment