<< Go to : : home : : demos : : exercises . . >>

Centering a Page of Divs in Internet Explorer 8

Here is the code you need to make a page center in Internet Explorer as well as other browsers.

We will start with the CSS because it is the key to making it work. The parts in red are the important pieces. Then just attach the external CSS sheet to your document, use the tags and ids and it will work.

In your external CSS document:

body {margin: 0 auto;
text-align: center;
background-color: #fff;
font-family: helvetica, arial, sans-serif;}

#container {width: 800px;
text-align: left;
margin: 0 auto;
background-color: #fff;}


In your html document:

<html>
<head>
<title> Centering my DIv Page </title>

<link rel="stylesheet" type="text/css" href="centerstyle.css" />

</head>

<body>

<div id="container">

All your page info in here (other divs, images, whatever).

</div>
</body>
</html>


In the CSS make sure you set the margin to 0 and auto in the body style and the text-align center.
In the container ID set the margin to 0 and auto also.

The 0 refers to the top and bottom and the auto is right and left.
All the settings run clockwise - start at the top, right, bottom and left. If they are an exact repeat, you only have to list the first two.

Then just attach the style sheet to your page . Once you use the body tag and then add the div with the id of container - your page should center.