Welcome to WebmasterWorld Guest from 54.198.179.85

Forum Moderators: not2easy

Message Too Old, No Replies

Centering DIV in a page

What's the best option to align DIV in a center of a page?

     
3:37 am on Jul 8, 2004 (gmt 0)

New User

10+ Year Member

joined:July 7, 2004
posts:28
votes: 0


What's the best option to align DIV in center of page so people with different monitor resolution still be able to view the page properly in a center?
3:43 am on July 8, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:May 20, 2003
posts:493
votes: 0


Two of the options:

#div {margin:0 auto;}
<div>stuff</div>

This doesn't work with the older versions of IE, I think 5 and lower.

#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}

I have enough IE5 users, so I use the second one with no problems.

Jennifer

6:28 pm on July 8, 2004 (gmt 0)

New User

10+ Year Member

joined:July 7, 2004
posts:28
votes: 0


what do you mean by

#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}?

I need to center the content div in a page. just like we do with table align="center". How do I get that in CSS?

Thanks for the help!

7:14 pm on July 8, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


RAmmstein just told you. The ...

margin: 0 auto;

...does it in modern, compliant browsers, setting left and right margins to equal amounts based on how wide the stuff in the middle turns out to be. For IE browsers...

text-align: center;

...usually does it. Combine those two into the same rule and you're covered for almost all cases.

I usually put the margin: 0 auto on the body element to center all the stuff on a page, but it doesn't always cascade right so sometimes it has to be placed on specific containing divs to make the magic happen.

is472001

7:54 pm on July 8, 2004 (gmt 0)

Inactive Member
Account Expired

 
 


Another solution that seems to work is to use xhtml 1.0 strict declaration (not sure if 1.1 or transitional works...I have only tried with 1.0 strict).

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

8:05 pm on July 8, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts:142
votes: 0


Jennifer, excellent second option there. Looks like I have a new default thanks to you. I'm anxious to have a look on other browsers. :)