Discuss HTML and CSS : CSS Center on Page


		Home \| Community \| Developer's Paradise User Groups \| Site Tools \| Site Information \| Search

Main Menu

Forums

SiteExperts.com Forums
All Discussions
SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : HTML and CSS :

Previous Discussion Next Discussion
CSS Center on Page

I have been trying to center an element (mainDiv) on a page and can't figure out why it will not center. I do have some elements in the 'hdrDiv" that have some absolute positioning and don't know if that could be causing the problem.

Please point me in the right direction.

Thanks

John

body

{

background-color: #5d7d60;

text-align:center;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

min-width: 800px;

}

.mainDiv

{

width: 800px;

padding: 0px;

top: 0px;

margin: 0px auto;

text-align:left;

}

.hdrDiv

{

width: 800px;

padding: 0px;

height: 201px;

z-index: 2;

}

/*Header Positioning*/

/*Row 1*/

.upperLeft

{

position: absolute;

top: 10px;

left: 50px;

}

.centerTop

{

top: 10px;

left: 298px;

height: 108px;

position: absolute;

}

.upperRight

{

position: absolute;

top: 10px;

left: 497px;

}

/*Row 2*/

.leftCorner

{

position: absolute;

top: 118px;

left: 0px;

}

.products

{

position: absolute;

top: 118px;

left: 84px;

}

.details

{

position: absolute;

top: 118px;

left: 175px;

}

.about

{

position: absolute;

top: 118px;

left: 497px;

}

.contact

{

position: absolute;

top: 118px;

left: 617px;

}

.lowerRightSpacer

{

position: absolute;

top: 118px;

left: 712px;

}

/*Row 3*/

.leftSide

{

position: absolute;

left: 0px;

top: 154px;

right: 765px;

}

.leftSpace

{

position: absolute;

top: 154px;

left:82px;

}

.rightSide

{

position: absolute;

top: 150px;

left: 710px;

width: 92px;

height: 61px;

}

.bottomRight

{

position: absolute;

top: 154px;

left: 497px;

}

/*Row 4*/

.bottomCenter

{

position: absolute;

top: 191px;

left: 298px;

}
Started By john1506 on Jun 1, 2010 at 1:30:45 PM
5 Response(s) | Reply

Earlier Replies | Replies 1 to 5 of 5 | Later Replies
bod1467 on Jun 2, 2010 at 2:11:44 AM (# 1)
This message has been edited.
Is this happening in all browsers? Which browsers are you testing with?

What DOCTYPE have you declared for the page?

Google is your friend
bod1467 on Jun 2, 2010 at 6:19:48 AM (# 2)
BTW - I meant to say ... it's nice to see an actual question here, rather than all the SPAM posts we seem to be getting.
brian on Jun 2, 2010 at 7:12:29 AM (# 3)
This message has been edited.
If I recall correctly, if you use XHTML as the doctype you can simply set the width of the div and then set margin:auto as well, and it should center it. This AFAIK works on all browsers and really is a life saver.

This bit of code definitely works on IE and am certain it works just fine on other browsers too:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<div style="width:300px;margin:auto;border:1px solid black;">I'm centered</div>

</body>
</html>

Also, as an added note, the XHTML doctype is only needed in IE and will not work in IE without it. Firefox definitely works either way.
bikramrig on Jun 19, 2010 at 9:18:05 PM (# 4)
Whats the difference between Absolute and Relative positioning ? Can you explain it by example, till date it is not very clear to me

WhyInsure
Income Protection Insurance Australia
bikramrig on Jun 19, 2010 at 9:20:32 PM (# 5)
Relative means relative to what ? Thats my main question. Absolute means from what co ordinate ?

I need some example on relative and absolute positioning to understand the difference.
Earlier Replies | Replies 1 to 5 of 5 | Later Replies

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.