SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why am I getting a horiz. scrollbar?

    OK, so I have my content inside a wrapper that is 960 px wide. In my CSS I have margin: auto; but for some reason there is more whitespace outside of my wrapper on the right side than there is on the left, causing a horizontal scrollbar to appear. This happens in all the browsers I've tried (Firefox, Chrome and IE7). I know padding and margin sometimes messes me up, so I went through and took them out one by one, but still no luck. Any ideas?


    P.S. I've also zeroed out padding and margin in the html, body tags.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi

    You need to decrease the width on <div id="pop">

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by acturnage View Post
    OK, so I have my content inside a wrapper that is 960 px wide. In my CSS I have margin: auto; but for some reason there is more whitespace outside of my wrapper on the right side than there is on the left, causing a horizontal scrollbar to appear. This happens in all the browsers I've tried (Firefox, Chrome and IE7). I know padding and margin sometimes messes me up, so I went through and took them out one by one, but still no luck. Any ideas?


    P.S. I've also zeroed out padding and margin in the html, body tags.
    Hi, if you could post a link to the page then it would help so muchh . ALternately post code.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not online yet, here's the CSS. I changed the width of the wrapper from 960 px to 760 px and that seemed to do the trick, though it doesn't look nearly as nice.

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    	background-color: #87b381;
    	color: #fbf8a4;
    	font-family: verdana, helvetica, arial, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	}
    
    #wrapper {
    	background-color: #000000;
    	width: 760px;
    	margin: auto;
    	margin-top: 12px;
    	margin-bottom: 12px;
    	border: 2px solid #fbf3af;
    	}
    
    .slide {
    	float: right;
    	}
    
    h1 {
    	font-size: 20px;
    	font-family: "freestyle script", mistral, serif;
    	}
    
    
    	
    
    #head h1 {
    	position:relative;
    	left: 250px;
    	top: 125px;
    	}
    
    #nav {
    	font-family: georgia, "palatino linotype", serif;
    	font-size: 18px;
    	float: left;
    	}
    
    #nav ul li {
    	list-style: none;
    	font-weight: normal;
    	margin-top: 20px;
    	background-color: #136108;
    	width: 150px;
    	border-left: 4px solid #41763a;
    	border-top: 2px solid #87b381;
    	}
    
    #nav a {
    	width: 130px; /* same width as ul li (minus padding), makes entire box clickable */
    	display: block;
    	padding: 10px;
    	}
    
    #nav a:link, #nav a:visited, #nav a:active {
    	color: #fbf8a4;
    	text-decoration: none;
    	}
    
    #nav a:hover {
    	background-color: #fbf8a4;
    	color: #000000;
    	}
    
    #content {
    	clear: right;
    	padding-left: 210px;
    	padding-top: 10px;
    	padding-right: 20px;
    	}
    
    a:link, a:visited, a:active {
    	color: #c5c7c5;
    	padding: 2px;
    	}
    
    #content a:hover {
    	color: #136108;
    	background-color: #c5c7c5;
    	}

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    We need the HTML too I'm afraid...you don't want us guessing your HTML structure.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by acturnage View Post
    ... for some reason there is more whitespace outside of my wrapper on the right side than there is on the left, causing a horizontal scrollbar to appear.
    ...
    Likely it is the H1 position that causes the scrollbar.

    Headings are blocks constrained by the width of its container if not set. Now there is no style on #head that probably is a div block also as wide as the container. So the heading is as wide as the #wrapper, and moved 250px by the left position it is poking out to the right with 250px.

    A solution could be to move the heading by a left margin instead. Then the H1 is constrained between the left margin and the container right edge and not moved outside the container:
    Code:
    #head h1 {
    	position:relative;
    /*	left: 250px; */
    	margin-left: 250px;
    	top: 125px;
    	}
    Relative positioning; the object is not moved, it is hidden in its original place with a visual copy, showed at the set position relative its own edges in the hidden position. The default coordinates are zero.

    Absolute positioning; the object is taken out of the flow, removed from its place in code, floating above other objects at the set position relative the edges of its nearest container with a position. The ultimate container to refer position is the viewport. The default coordinates are auto, i.e. the browser tries to apply the coordinates of its place in code to fit the flow.

    Before you use vertical margins, read in on how to avoid collapsing margins.
    Happy ADD/ADHD with Asperger's


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
  •