Centering a <div> within another centred <div>?

Dev Shed Forums Sponsor:

June 11th, 2004, 03:12 PM

jimriggott

Contributing User

Join Date: May 2003

Posts: 53

Time spent in forums: 4 h 13 m 57 sec
Reputation Power: 6

Centering a <div> within another centred <div>?

I have a simple query, and don't know if this can be done.

I have a <div> layer, which is centred on the page, and I am trying to get another <div> within that to be centred as well.

I have a sample page on http://jimpix.co.uk/002.htm which shows that this doesn't work.

This is my code:

#########################################
<html>
<head>
<style>

body { text-align: center; }

div#container
{
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: left;
border:10px solid pink;
}

div#container2
{
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: left;
border:10px solid red;
}

</style>

</head>
<body>
<div id="container">
<div id="container2">test</div>
</div>
</body>
</html>
######################################

I thought that the 2nd div, would sit centred in the middle of the first one.

Can anyone suggest what I am doing wrong, or if there is a way this can be done?

Thanks

Jim

June 11th, 2004, 05:03 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

I'm guessing you mean it doesn't work in IE, because it does work in modern browsers like Moz. IE, in quirks mode uses the text-align property of the parent element. You have text-align:center; in body, which centers div1, but div1 has text-align:left;, so div2 sits at the left. I believe IE6 in compliance mode does margin: xx auto; correctly, but that still leaves IE<6.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

June 12th, 2004, 02:13 AM

jimriggott

Contributing User

Join Date: May 2003

Posts: 53

Time spent in forums: 4 h 13 m 57 sec
Reputation Power: 6

Thanks Gary, that makes sense...

Jim

Viewing: Dev Shed Forums > Web Design > CSS Help > Centering a <div> within another centred <div>?

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump