Help with centering a layout correctly

HTML & CSS
1

Usually I constrain content within a page width of 980px or so.

But I’m just trying out a layout that has a gradient effect in the header that I would like to have a total width of 1200px so that the gradient effect kind of extends beyond everything else.

You can see what I mean here:

http://www.traveltradeonly.com/index_new_101.php

It all looks OK so long as the browser window is at least 1200px, but if its reduced beyond that, then it doesn’t centre. Which presumably it should ideally do down to 980px which is the width of content constrained by the red and yellow borders.

The CSS looks like this:


body {
	background-position:top;
	background-image:url(../images/body_background.gif);
	background-repeat:repeat-x;
  	background-color: #2C455F;
  	color: #2c2c2e;
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 13px;
  	line-height: 14px;
	margin: 0 0 0 0; 
  	padding: 0 0 0 0; 
  	text-align: center; 
}
#header {
 	margin: 0 auto 0 auto; 
	padding: 0px 0px 0px 0px; 
  	width:1200px;
	height:150px;
	text-align:centre;
	border-left:1px solid #999;
	border-right:1px solid #999;
	background-image:url(../images/header_background.png);
	background-repeat:no-repeat;
}
#header #navigation {
	margin: 0 auto 0 auto;
	height: 28px;
  	padding: 122px 0px 0px 0px; 
  	border-top:0px solid #FFF;
  	border-bottom:0px solid #FFF;
  	width:980px;
	border:1px solid #900;
	text-align:center;
} 
#contentWrapper {
	margin: 30px auto 0 auto; 
  	clear:both;
	text-align: left; 
  	width: 1200px;
	color:#FFF;
	border-left:1px solid #4C5C66;
	border-right:1px solid #4C5C66;
}
#contentWrapper #rightColumn {
	margin: 0px 110px 0px 0px;
	padding: 15px 15px 15px 15px;
  	border-right: solid 0px #FFF; 
  	float: right;
  	width: 270px;
	border:1px solid #990;
	background-color:#182633;
}
#contentWrapper #content {
  	margin: 0px 420px 0px 110px;
	padding: 15px 15px 15px 15px;
  	font-size:13px;
  	line-height:16px;
	color:#FFF;
	border:1px solid #990;
	background-color:#182633;
}

Any suggestions for improving that CSS to produce the desire effect much appreciated.

Thanks.

2

Hi, johngordon,

Here’s an easy solution. You have an orphaned </div> just above the </body> tag. Let’s give that </div> a matching open div just below the <body> tag.


<div id="outer">

Then on your layout_new_101.css sheet, move the background image for the header to that new div.


#outer {
    background-image:url(../images/header_background.png);
    background-repeat:no-repeat;
    background-position:center top;
    min-width:980px;    /* probably desirable if the page width is fixed */
}
#header {
    margin: 0 auto 0 auto; 
    padding: 0px 0px 0px 0px; 
    [color=red][s]width:1200px;[/s][/color]    /* should be unnecessary */
    height:150px;
    text-align:centre;
    border-left:1px solid #999;
    border-right:1px solid #999;
}

The gradient will remain centered when the window width is narrower than 1200px, down to whatever min-width is set (if any).

Cheers.

3

Thank you for that. I did at one point have an outerWrapper DIV, hence the extra closing tag I’d missed at the bottom.

Never really had to use min-width before, so that solves one I’ve often wondered about, ie this effect of having a page background that repeats horizontally, but also having a header image / background that extends beyond the main width.

4

Thanks for the feedback. Glad to know the information is helpful.

Using CSS3, one can assign multiple background-images to the same container. However, I noticed that you give a lot of attention to backwards compatibility with older browsers, so the extra <div> method seemed appropriate. It was probably the better choice in the long run, anyway.

Cheers.