Odd page narrowing

HTML & CSS
1

Can you guys see the narrowing toward the bottom of my page? Shelter and Lights

A friend says it looks fine on his browsers, but on my browsers (IE8, FF, Chrome & Safari) on 2 different computers I see the narrowing as in this screenshot:
http://www.shelterandlights.com/images/screenshot.gif

I can’t figure out why, I’ve cleared the floating divs, so I’m guessing there’s a problem wiht my container div. I’m quite new to css layout, this is my first real go at it.

Here’s my code:


html {
    overflow-y: scroll;
	margin:0px;
	height:100%;
}
body {
	color: #151515;
	background:#eeeec6 url(images/background.gif) center repeat-y;
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align: center;
	}
	
#container { margin: 0 auto; width:980px; height:100%; background:#FFF; } /* website wrapper */

#header { position:relative; height:287px; width:980px; background: #5B7155 url(images/header-img.jpg) center no-repeat;}/* top header image*/

/* ^^^^^^^^ NAVIGATION MENU ^^^^^^^^^^ */
#tabs31{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #1B281A;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color: #333333;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#1B281A;background:#fff url(images/bgON1.gif) no-repeat top right;}
/* ^^^^^^^^ NAVIGATION MENU ^^^^^^^^^^ */

#wrapper{ width:960px; margin:0px auto;}/* Container for the columns in main content body */
#left { float:left; width:718px; min-height:400px; border:#CCCCCC solid 1px; margin-top:10px; margin-bottom:10px; }
#right { float:left; width:228px; min-height:400px; border:#CCCCCC solid 1px; margin: 10px 0px 10px 10px;}
.clear { width:100%; clear:both; height:0px; }
#footerline{height:15px; margin-top:10px; background:#CCCCCC url(images/footerline.gif) repeat-x; clear:both;}
#footer {width:100%; min-height:120px; background: #363C33; clear:both;}



<body>
<div id="container">
  
  <div id="header">
  </div>
    <div id="tabs31">
      <ul>
       <li><a href="#" title="" class="current"><span>Home</span></a></li>
       <li><a href="#" title=""><span>Marquee Rates</span></a></li>
       <li><a href="#" title=""><span>Entertainment</span></a></li>
       <li><a href="#" title=""><span>Gallery</span></a></li>
       <li><a href="#" title=""><span>Themes</span></a></li>
       <li><a href="#" title=""><span>Contact Us</span></a></li>       
      </ul>
    </div> 
    
  <div id="wrapper">
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
    <div id="footerline">
    </div>
    <div id="footer">
   </div>
    
</div>
</body>
2

I think the problem is putting height:100% on #container. If you look at where the narrowing starts, it’s just below the ‘fold’, ie the bottom of your initial view of the page. If you allow the container to take its natural height, rather than constraining it to 100% (ie, the height of the viewport), it will show the same width all the way down.

3

Spot on Steve, you’re my new best friend! Another lesson learned, that’s my first css web layout done, well the skeleton anyway. :slight_smile:

Thanks