center website layout using css - im mad ROAR

unwashed potato!

unwashed potato!

unwashed potato!

Soldato
Joined
12 Feb 2006
Posts
17,643
Location
Surrey
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.
 
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 said:
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.
Click to expand...

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

Code: 
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;
}

Code: 
<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?
 
You must log in or register to reply here.
Back
Top Bottom