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>