Content scrolls horizontally?

HTML & CSS
1

Content scrolls horizontally?

hi all

I have this problem that I know is simple but I can’t work it out.

This is a stripped down version of what I have - http://www.ttmt.org.uk/

If you scroll right over the content (centre of the page), the page scrolls slightly with a scroll bar at the bottom

Why is it scrolling? How can I fix it?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="robots" content="noindex, nofollow" />
  
	<title></title>
		  	
  <style type="text/css" media="screen">
    
    *{
      margin:0;
      padding:0;
    }    
    
    #wrap{
    	margin:0 auto;
    	width:1020px;
    }
    
    #content{
    	overflow:auto;
    	margin:0 0 80px 0;
    }
    #content h1{
    	margin:20px 0 20px 0;
    }
    #content .Display{
    	margin:0 0 15px 0;
    }
    
    #content #leftCol{
    	float:left;
    	width:675px;
    }
    #content #leftCol img{
    	margin:0 0 15px 0;
    }

    #content #rightCol{
    	float:right;
    	width:330px;
    }
    #content #rightCol #firstBtn {
    	border-top:1px solid #444;
    }
    #content #rightCol .sideNavBtn {	
    	border-top:1px dashed #444;
    	cursor: pointer;
    	float: left;
    	padding:14px 10px;
    	width: 330px;
    }
    #content #rightCol .sideNavContent {	
    	width: 330px;
    	float: left;
    	background: #f5f5f5;
    }
    #content #rightCol .sideNavContent p{	
    	font:.96em/1.3em Helvetica, sans-serif;
    	padding:10px 10px 20px 10px;
    }


</style>
    
  
</head>

<body>
  <div id="page">
    
    <div id="wrap">
   
      <div id="content">
        <h1>Title</h1>
        
        
        <div class="Display">
          <img src="1.png" />
        </div>  
        
        <div id="leftCol">
          <img src="sample.png" />
        </div><!-- #leftCol -->
        
        <div id="rightCol">
          <div id="sideNav">
            
        		<div class="sideNavBtn" id="firstBtn">Link One</div>
        		<div class="sideNavContent">
        		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede </p>
        		</div><!--sideNavContent-->
        		
        		<div class="sideNavBtn">Link One</div>
        		<div class="sideNavContent">
        		 	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede </p>
          		</div><!--sideNavContent-->
          	
        		<div class="sideNavBtn">Link One</div>
        		<div class="sideNavContent">
        		    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede </p>
          		</div><!--sideNavContent-->
          		
        	</div><!--sideNav-->
        	
        </div><!-- #rightCol -->
        
      </div><!-- #content -->
      

      </div><!--wrap-->
    </div><!-- #page -->


</body>
</html>
2

Your .sideNavBtn have a set width but also left and right padding, which makes them wider than the sidebar (330 + 10 + 10).

#content #rightCol .sideNavBtn {
  border-top: 1px dashed #444444;
  cursor: pointer;
  float: left;
  padding: 14px [COLOR="#FF0000"]10px[/COLOR];
  width: [COLOR="#FF0000"]330px[/COLOR];
}

Because you have overflow: auto on the Content div, you get the scroll. Remove the width setting on the .sideNavBtn and then it wn’t blow out the design, because block-level elements will expand to fill their contaier anyhow, but won’t blow out of them if a width is not expresssly set. Also, rather than have text in a div, you should be wrpaaing those headings in header tags, such as <h2>.