positioning 'centering' problem

**marcusami** · 06-23-2008 12:59 PM

hey its seems that i cannot center my wrapper and i am blind to why.
i did margin : 0 autol have a doctype and just dont know why

please take a look

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
 <title>
  Test
 </title>
 <style type="text/css">
 <!--
 * {
 margin: 0;
 padding: 0;
 }
 
 #wrapper{
  position: relative;
  margin:0 auto;
	top: 100px;
 }
 -->
 </style>
</head>
<body>
<div id="wrapper">
 Hello
 </div>
</body>
</html>

http://www.mmtrials.com/layouts/test.php

thanks
Marcus

**marcusami** · 06-23-2008 01:10 PM

ha figured it out! i am a nitwit! i didnt give a width - so wrapper was centerd for 100% of page; and the text i had wasnt aligned in anyway.

sorry for post !
thanks
Marcus

**WebJoel** · 06-23-2008 06:39 PM

Yes, for IE, a valid !doctype is required to make "margin:0 auto;" work, and also a stated width is required (includes any percent width as well as static width)

**shaunm** · 06-23-2008 10:57 PM

Once you add that width to the div definition, you can do something like this too:

#Layer-1 {
position: absolute;
margin-left: -250px;
left: 50%;
top: +0px;
width: 500px;
height: 280px;
z-index: 1;
}

make that negative margin-left equal to half the width and your in business.

psd2css Online will generate that code for you from your photoshop file if you use the '_center' Layer Naming Convention.

--
Shaun
shaun@psd2cssonline.com
http://psd2cssonline.com
Free, Fast and Easy CSS/XHTML Compliant web pages converted from your Photoshop files

Thread: positioning 'centering' problem

Thread Tools

Display

positioning 'centering' problem

Another trick for centering

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions