Why don't this align center

csphard · Apr 30, 2008

Why wont this center. Iused text-align: center; in the body and text-align: left in the wrapper along with margin: 0 auto; and it does not center. Can someone tell me what I am doing wrong. Thanks howard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled Document</title>
<style>
body
{
text-align: center;}
#wrapper{width: 800px; text-align: left;
margin:0 auto;}
#content{width: 500px; height: 400px;border: 10px solid black;position:absolute; top:0; left:10px;}
#menu {width: 200px;background-color:red;position:absolute; top:0;left:510px;}
</style>

</head>
<body>
<div id="wrapper">
<div id="content">test</div>
<div id="menu">menu</div>
</div>
</body>
</html>

BillyRayPreachersSon · Apr 30, 2008

Because all of the content inside #wrapper is absolutely positioned, #wrapper has no dimensions at all, and so is empty. Given it is the only item not positioned, you're never seeing it, or anything else, centred.

If you wish #content and #menu to be centred, either remove the absolute positioning (which I'd very, very much recommend), or give #wrapper relative positioning.

As I said, though... your best bet is to not use absolute positioning. You should learn how to lay out pages without using it for the majority of your elements.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Why don't this align center

csphard

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor