SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd page narrowing

    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>

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spot on Steve, you're my new best friend! Another lesson learned, that's my first css web layout done, well the skeleton anyway.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •