...

View Full Version : How to center the entire page with css?



firstwave
08-17-2005, 06:16 PM
text-align: center; --- it works in Firefox but not IE, so that is out of the question. How on earth can i do it without creating a table? Right now, I use the table method, but I dislike tables :)

Any help would be appreciated

Thanks

Tristan Gray
08-17-2005, 06:28 PM
Say you have a main content div right? We'll call it <div id="main">. Try this.

#main {
margin: 0px auto;
}

firstwave
08-18-2005, 12:34 AM
Thank you for your speedy reply ;)

Well, I removed the table and tried the codes you gave me. Unfortunately, they did not work in IE, but maybe the problem is in my part. I could've perceived you reply wrong.

My goal is to center a webpage on the screen without the usage of a table. Right now, I have "<table align="center"> to do this, but as I said, I dislike to use any form of table.


Say you have a main content div right? We'll call it <div id="main">. Try this.

#main {
margin: 0px auto;
}

Does that only center one div? Is it possible to center my entire page?

Thanks again!

Ranger56
08-18-2005, 12:36 AM
Thank you for your speedy reply ;)

Well, I removed the table and tried the codes you gave me. Unfortunately, they did not work in IE, but maybe the problem is in my part. I could've perceived you reply wrong.

My goal is to center a webpage on the screen without the usage of a table. Right now, I have "<table align="center"> to do this, but as I said, I dislike to use any form of table.



Does that only center one div? Is it possible to center my entire page?

Thanks again!

Just put all the info for your page in it.


<html>
<body>
<div id="main">

all junk goes here

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

Yes i know that code sucks

Kurashu
08-18-2005, 12:48 AM
* html {
text-align: center;
}

#main {
width: /*insert width here*/
margin: 0 auto;
text-align: left;
}


That'll center your content in IE, Moz/FF, Opera, and Safari.

]|V|[agnus
08-18-2005, 05:48 PM
A method that works without hacks but requires a fixed width:

#containerToCenter {
width: [yourWidth]
position: absolute;
left: 50%;
margin-left: -[yourWidth/2]
}

Tristan Gray
08-18-2005, 05:58 PM
I prefer fixed widths anyway because at crazy high resolutions it can be better to just have it not take up as much of the browser window otherwise things can become really unreadable or ugly. That being said 760px wide isn't very big on 1280x1024. But I still prefer the 'print-style' layout.

rmedek
08-18-2005, 06:05 PM
Make sure you have a decent DOCTYPE, otherwise IE won't play nice with things like "margin: 0 auto;". (I think) the hacks are only needed for IE 5...

]|V|[agnus
08-18-2005, 06:10 PM
That is correct. IE 6 will do auto margins right under the right conditions, whereas the archaic crap that is IE 5 needs some help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum