center website layout using css - im mad ROAR

[unwashed potato!]

everytime i start a blooming website i always have this problem, spend 20 minutees working out what i have to do, then go and forget it for the enxt time.

Here i am once again trying ti figure out how to center a webbsite layout for IE, i got it working in FF but not IE6, (can't test IE7).

this is what i do for FF,

#wrapper {
margin: 0px auto 0px auto;
}


like i say works in FF not IE6. Even when i look at my old code i can't remember how to get it to work and im searching google and these forums and just can't find an answer.

It so annoying as i know CSS well, but this thing everytime gets me and is the first thing that needs fixing.

 

[Augmented]

Should work fine in IE6. IE5 has issues with that, but not 6.

Just FYI, you can shorten the code to:

#wrapper {
margin: 0 auto;}

But that won't make a difference to the way it works. Have you set an explicit width on #wrapper.

 

[toString]

I'm sure I've had this in the past, and by giving the it a width:xxxpx it suddenly sorts its self out... You could try that.

Edit, I didn't see the last line in the above post..

 

[unwashed potato!]

i have tried it all, this is the most i use:

#wrapper{
margin: 0 auto 0 auto;
width:765px;
position:relative;
height:100%;
}

and i try it differnt ways, for example, just margin and width, just margin etc.

still not working. Would it make a difference that its not hosted? wouldn't have thought so but just a guess.

 

[Augmented]

Would it make a difference that its not hosted? wouldn't have thought so but just a guess.

No, shouldn't do. Can you post up what your markup looks like? May well be a problem in how you've used your #wrapper element.

 

[Mickey]

body
{
	text-align:center;
}
		
#wrapper
{
	margin:0 auto;
	width:765px;
	position:relative;
	text-align:left;
}

 

[SiriusB]

Try setting the width first, then margins. I used the exact same code in this webpage: www.aeternum.co.uk/smp.html and it centers perfectly in IE.

 

[unwashed potato!]

No, shouldn't do. Can you post up what your markup looks like? May well be a problem in how you've used your #wrapper element.

Not 100% surw what the markup means so put the whole blooming code up. I tried doing width first and still no change.

body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #fefef7 url(images/background/bg_top.gif) repeat-x;
	margin:0px auto 0px auto;
	color:#2f2f2f;
}

hr{
	height:4px;
	background-color: #93aeca;
	border:none;
	border-bottom: 2px solid #a4c0dc;
	margin: 10px 8px 10px 0px;
}

ul{
	list-style-image: url(images/arrow.gif)
}

a{
	color:#416992;
	
}

   
a:hover{
	color: #93aeca;
	text-decoration: none;
}

/*------- Site Wrapper --------- */

#wrapper{
	width:765px;
	margin: 0 auto 0 auto;
	position:relative;
	height:100%;
}

#site-title {
	margin: 20px 0px 10px 0px;
	width: 765px;
	height: 35px;
	font-size: 30px;
	color: #ffffff;
	text-indent: 8px;
	font-weight: strong;	
}

#site-wrapper {
	
	width:765px;
	background: url(images/background/content_middle.gif) repeat-y;
	height: 100%;
	
}

#tac-wrapper {
	margin: 0px auto 0px auto;
	width:765px;
	background: url(images/background/content_middle.gif) repeat-y;
	height: 1000px;
}	

#site-top {
	width:765px;
	background: url(images/background/content_top.gif) no-repeat;
	height: 13px;
}

#site-leftimg {
	width: 7px;
	height: 285px;
	float:left;
	_margin-top: -8px;
	background: url(images/background/content_left.gif) no-repeat;
}

#site-rightimg {
	width: 6px;
	height: 285px;
	float: right;
	_margin-top: -8px;
	background: url(images/background/content_right.gif) no-repeat;
}

#site-footer {
	width: 765px;
	height: 55px;
	background: url(images/background/content_footer.gif) bottom no-repeat;
	margin: 0px auto 30px auto;
	overflow: hidden;
}

.footer-content {
	padding-top: 15px;
	text-align: center;
	
}

/*------- Rightbar --------- */

#rightbar {
	width: 180px;
	_width: 200px;
	height: 100%;
	background: #f6f6f6;
	float: right;
	margin-right: 5px;
	padding:10px;
	overflow: hidden;
}

.right-image {
	float: left;
	margin-left: 15px;
}

/*------- Content ---------- */

.content-wrapper {
	width: 520px;
	height: 100%;
	margin: 5px 5px 0px 20px;
}

.phone-img {
	background: url(images/phone-num.jpg);
	margin: 0px auto 0px auto;
	width: 333px;
	height: 60px;
}

.mobile-img {
	background: url(images/mobile-num.jpg);
	margin: 0px auto 0px auto;
	width: 333px;
	height: 60px;
}

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

<link rel="shortcut icon" href="stylesheets/images/favicon.png" />
	  
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />

</head>
<body>

<div id="wrapper">

<div id="site-title">

</div>

<div id="site-wrapper">


<div id="site-top">
</div>



<div id="site-leftimg">
</div>

<div id="site-rightimg">
</div>

<div id="rightbar">



<hr>

<br />



<br /><br />

<hr>

<div class="right-image">

</div>

</div>


<div class="content-wrapper">






<br />

<hr>

<br />



<div class="phone-img"></div>

<div class="mobile-img"></div>

<br />

<br />








</div>

</div>

<div id="site-footer">
<div class="footer-content">
</div>
</div>



</div>

</body>
</html>

So tell me, how stupid and obvious is the solution?

 

[MagSafe]

try defining your html document.

 

[edwardcasbon1]

Take the margin off the body, its not really doing anything there.

On your container div just put

#wrapper {
width: xpx;
margin: 0 auto;
}

That WILL sort it, thats all you have to do to centre the div.

HTH

 

[Augmented]

Not 100% surw what the markup means so put the whole blooming code up.

Markup means your HTML or XHTML, or XML - it's what the 'ML' stands for: "Markup Language" .

try defining your html document.

Bingo. That's likely to be the answer.

Without a doctype, IE6 will drop out of standards-mode and switch to quirks mode rendering. And, as such, probably inherits IE5's lack of support for centring with margin: 0 auto;. Mickey's code a few posts above should fix it, but it would be better to get your site rendering in standards mode for IE6.

So, for XHTML markup, add to the top:

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

More: http://alistapart.com/stories/doctype/

 

[unwashed potato!]

ha i knew it, it was so obvious and easy to fix. The ony reason i hadn't defined it yet is becasue i always just leave that until the end.

thanks guys