Help With Site Width/Site Header

My sites width is 960px but the rotating header on the home page is wider because there r some shadows on the right side of the image (see below)

Since I needed to add 88px to the right side of the border, I added 88px to the left side of the image also and now my header is 1136px. It displays fine since I gave the headers its own container which is :


.rotatecontain {
margin:0 auto;
width:1136px;
}

instead of


.container {
margin:0 auto;
width:960px;
}

but now the home page has to be viewed at 1136px…

If the browser width is smaller than 1136px, it pushes the 1136px div to where its lined up with the rest of the website… and then it looks like this:

everything is suppose to line up with the top and bottom lines to the right but it gets pushed in…

Is there a way i can still keep the Header images but display the 1136px images with a 960px container? If not is there a better way to do this?

Sounds like the wider header is still contained within a 960 wrapper? If so, you would be better off keeping this wider section completely separate from the rest. Then it will always stay centered.

Otherwise, it’s hard to understand exactly what you’re doing. We could fix this in a jiff if we could see the site online.

it has its own container of 1136px… it stays centered if the browser is wide enough but if its smaller it moves the header to the right… i have the header container and the content container separate… the content and the rest of the website is 960px

:wink:

From the sounds of it, while having the header inside the wrapper, I’d probably just drag the header out of wrapper with AP and a left:-88px; how’s that perform for you?

heres some of the html and css… showing the top/menu of the site and the header images


<div id="rotatecontainer">
	<div class="rotatecontain">
		<div id="rotationwrapper" class="clearfix">
			<div id="rotation">
				<ul id="pics">
					<li><a href="[~4~]"><img src="/assets/i/rotate/img.png" alt="img" width="1136" height="302" /></a><span class="slideinfo">img. <a href="[~17~]"> Lorem ipsum</a></span></li>
				</ul>
  			</div>
			<div id="rotateinfowrapper" class="clearfix">
				<div id="rotateinfo">
					<div id="imgtitle"></div>
					<div id="rotatenav"></div>
				</div>
			</div>
  		</div>	
	</div>
</div>


<div id="contentcontainer">
	<div class="container">
		<div id="content" class="span-12 clearfix">
  			<div id="middle">
  				<div class="span-4">
  					<div class="midsection">
					<h3>Lorem ipsum</h3>
					<p class="bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  					</div>
  				</div>
  				
  				<div class="span-4">
  					<div class="midsection">
					<h3>Lorem ipsum</h3>
					<p class="bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  					</div>
  				</div>
  				
  				<div class="span-4 last">
  					<div class="midsection">
					<h3>Lorem ipsum</h3>
					<p class="bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  					</div>
  				</div>
  			</div>
		</div>
	</div>
</div>


#rotatecontainer{
	width:100%;
	clear:both;
	}	
	
.rotatecontain{
margin:0 auto;
width:1136px;
}
#contentcontainer{
	width:100%;
	clear:both;
	padding-bottom:6em;
	border-bottom:#f1f1f1 3px solid;
	}
.container {
  width: 960px;
  margin: 0 auto;
}
#rotationwrapper{
	position: relative;
	margin-top:3em;
	}
#rotation{
	height: 302px;
	width: 1136px;
	overflow: hidden;
	float:left;
	}	
#rotation ul{margin:0;}
#rotateinfowrapper{
	position: absolute;
	bottom:36px;
	background:#1a1a1a;
	width:386px;
	margin-left: 88px;
	z-index:1000
	}
#rotateinfo{
	width:386px;
	z-index:1001;
	}
#imgtitle{
	display:none; 
	color:#fff; 
	float:left; 
	padding:1em;
	height:14px;}
#imgtitle a, #imgtitle a:visited, #imgtitle a:link{
	font-weight: bold;
	color:#76c8ff;
	}
#rotatenav{
	float:right;
	padding:1em;
	height:14px;
	}
#rotatenav a{ 
	text-indent:-9999px; 
	overflow:hidden; 
	background:transparent url(/assets/i/rotate/anchor.png) 0 0 repeat-x;
	width:16px; 
	height:3px; 
	float:left;  
	overflow:hidden;
	margin:6px 0 5px 3px;
	display: block;
	z-index:2000;
	}
#rotatenav a:hover{ background:transparent url(/assets/i/rotate/anchor.png) 0 -3px repeat-x;}
#rotatenav a.activeSlide{ background:transparent url(/assets/i/rotate/anchor.png) 0 -3px repeat-x;}
#rotatenav a{outline:none;}
.slideinfopricing
#listingpics{background-color:#333333; overflow:hidden; height:280px;width:736px;}

#middle{
	border-top:10px solid #eee;
	padding-top:6em;
	}
.midsection{
/*
	padding: 4px;
	border: 1px solid #eee;
*/
	border-top: 5px #f4f4f4 solid;
	padding:1.5em;
	border-bottom: 1px #eee solid;
	}
	
.middleheader{
	background: #1a1a1a;
	height:30px;
	}
	
.middle h3{margin:0;}


that should be enough to see the problem… i would upload it but dont have a site to upload it 2 at the moment