centering this fixed width layout, please help!

Teach

Hello!

I really hope you can help me please.
We have been using this layout for some time, which was made partly by us and a bit taken from our previous sites. It works fine, but a new request is that it's centered to the middle of the page, rather than the left.

I have tried to the best of my ability to do this, using margins with 0 auto; and all I can manage to do is get it into the middle, but then the backgrounds don't line up, and the right-side boxes don't appear.

If you could please help me do this, I'd be really appreciative!

I have created a #container div, and left that blank and the CSS / HTML and images are on this page.

THANK YOU in advance if you can help me do this.

NogDog

I fiddled around with it a bit and came up with this, which I think does what you want (at least in FF2 and IE7):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en"><head><title>title</title>





<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen, projection, print">
body {
	margin: 0px;
	padding: 0px 0px 0px 25px;
	background: #999 url('img/bg.jpg') repeat-y;
	font-family: Tahoma, Franklin Gothic Medium, helvetica, sans-serif;
	font-size: 12px;
}
#container {
   width: 1000px;
   margin: 0 auto;
}
/* Misc CSS */
.clearer {
	clear: both;
	height: 1px;
	font-size: 1pt;
}

/* Header and Top block navigation */
#header {
	height: 180px;
	width: 939px;
	color: #fff;
}
#header h1 {
	display: none;
}
#topbg {
	height: 72px;
	width: 939px;
	background: url('img/topbg.jpg');
}

/* Top Navigation Menu */
div.menu ul {
	margin: 0px 1px 0px 0px;
	padding: 0px;
	float: left;
}
div.menu li {
	list-style-image: none;
}
div.menu a {
	padding: 5px 0px 5px 8px;
	display: block;
	width: 214px;
	background: #4b4b4b;
	color: #ddd;
	font-size: 11px;
	text-decoration: none;
}
div.menu a#current {
	background: #666;
	color: #fff;
}
div.menu a:hover {
	background: #555;
	color: #fff;
}
div.menu li {
	margin: 0px 0px 1px 0px;
	padding: 0px;
	list-style-type: none;
}

/* Content Areas */
#content_left {
	margin: 5px;
	width: 665px;
}
#welcome {
	padding: 6px 12px;
	background-color: #0070CD;
	color: #fff;
	font-size: 14px;
	font-variant: small-caps;
	font-weight: bold;
}
#contentarea {
	margin: 5px 0px 0px 0px;
	padding: 10px;
	clear: both;
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #eee;
}

#contentarea .body a , #contentarea .body a:hover {
	color: #333;
	text-decoration: underline;
}
#contentarea .body {
	font-size: 12px;
	text-align: justify;
	line-height: 140%;
}

/* Right Side Navigation */
#content_right {
	position: absolute; 
	width: 255px;
	top: 187px;
   margin-left: 670px;
}
#links {
	margin-bottom: 10px;
	border: 1px solid #666;
}
#links a {
	text-decoration: none;
}
#links input , textarea , select {
	color: #333;
	font-size: 11px;
}
div.right {
	padding: 6px 0px 8px 8px;
	display: block;
	background-color: #fff;
	color: #333;
	font-size: 11px;
	text-decoration: none;
}
#links a:hover {
	color: #0080DD;
	background-position: left bottom;
}
#links div.line {
	height: 1px;
	background-color: #EEEEF5;
}
#links .title {
	padding: 5px 8px;
	background-color: #333;
	color: #fff;
	font-variant: small-caps;
	font-weight: normal;
}

/* Footer */
#footer {
	margin: 0px 5px 0px 5px;
	width: 665px;
	background-color: #0070CD;
	color: #fff;
	border: 1px solid #eee;
}
#copyright {
	padding: 6px 12px;
	font-size: 11px;
}
#footer a , #footer a:hover {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
#spacer {
	clear: both;
	height: 6px;
	font-size: 1pt;
}
</style></head><body><div id="container">
    <div id="header"><a id="top"></a><h1>website title</h1></div>
    <div id="topbg">
      <div class="menu">
        <ul>
          <li><div><a href="#" title="">link</a></div></li>
          <li><div><a href="#" title="">link</a></div></li>
          <li><div><a href="#" title="">link</a></div></li>
        </ul>
        <ul>
          <li><div><a href="#" title="">link</a></div></li>
          <li><div><a href="#" title="">link</a></div></li>
          <li><div><a href="#" title="">link</a></div></li>
        </ul>
        <ul>
          <li><div><a href="#" title="">link</a></div></li>
          <li><div><a href="#" title="">link</a></div></li>
          <li><div><a href="#" title="">link</a></div></li>
        </ul>
      </div>
    </div>

<div id="content_left">
  <div id="welcome">Welcome text</div>
  <div id="contentarea">
    <div class="body">
      <div class="v2">
        <p>Some content</p>
      </div>
    </div>
  </div>

  <div id="content_right">
    <div id="links">
      <div class="title">Navigation</div>
      <div class="right">some navigation</div>
      <div class="line"><span></span></div>

      <div class="title">Information</div>
      <div class="right">Your IP: .</div>
      <div class="line"><span></span></div>

      <div class="title">Information</div>
      <div class="right">Your IP: .</div>
      <div class="line"><span></span></div>

      <div class="title">Information</div>
      <div class="right">Your IP: .</div>
      <div class="line"><span></span></div>
    </div>
  </div>
</div>

<div id="footer">
  <div id="copyright">notice</div>
</div>
<div id="spacer">&nbsp;</div>
  </div></body></html>

Teach

Hi NogDog, thanks very much 🙂

I got pretty much the same but you've fixed the right side blocks - great!!!
The only problem is that silly background image, it's still aligned to the left. It's confusing me too as the actual background image has more stuff on the right than the left.. .I'll try and play around with it 🙂

Thanks!

Teach

this post now irrelevant 🙂

Teach

Hey 🙂

I appear to have sorted out the image problem .. (please verify) and it all looks good.
One thing remains though ... as you can see, if the right blocks exceed the content, the background stops and isn't repeated. How can I make it keep repeating so it fills the whole height of the page, and the white of the background touches the bottom?

Thanks if you can help me sort this final issue 🙂