homepage Welcome to WebmasterWorld Guest from 54.243.23.129
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

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




msg:1181324
 3:37 am on Jul 8, 2004 (gmt 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?

 

RammsteinNicCage




msg:1181325
 3:43 am on Jul 8, 2004 (gmt 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

jmoreira




msg:1181326
 6:28 pm on Jul 8, 2004 (gmt 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!

createErrorMsg




msg:1181327
 7:14 pm on Jul 8, 2004 (gmt 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




msg:1181328
 7:54 pm on Jul 8, 2004 (gmt 0)

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" />

Noisehag




msg:1181329
 8:05 pm on Jul 8, 2004 (gmt 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. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved