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 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;}HTML Code:<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>
Bookmarks