The title more or less explains my problem. When my browser is not maximized, I get an extra 60-80 pixels or so of unused space to the right of my content area. I'm not sure what's causing it. All of my floated elements are within the content area, and Firebug isn't highlighting any stray elements, padding, or margin. This is what I'm talking about.

What's really odd is that, as you can see, it looks like my layout is larger than the viewing area, but my layout is a hard 960 pixels wide, so it should fit within my viewing area without any trouble. I'm at a loss.

HTML:

<body>
    <div id="wrapper">
        <div id="main">
            <div id="footer">
            </div>
        </div>
    </div>
</body>

CSS:

body { background-color: #29b950; padding: 0; margin: 0; font-family: verdana, arial, helvetica, sans-serif; }
#wrapper { width: 60em; margin: 0 auto; padding: 1px 0 0 0; background-color: #fff; }
#main { width: 52.5em; margin: 0 auto; }
#footer { height: 8.438em; background-color: #565656; }

2 answers

Ktash 1851
0
points
This was chosen as the best answer

Jordan had it close for a quick fix.

body { overflow-x: hidden; }

should fix the issue in the meantime. Really, though, you want to find the root of the issue. My guess is that the explicit width set on one of the elements in your CSS is larger than the width of the window. To test this, add

body { width: 60em; border: 1px solid #000000; overflow-x: auto; }

to your body element, and try it again. If things extend outside the border applied to the body, or if they're cut off on the left hand side, then that will be the culprit. If not, then comment and we can try and work through some other things to find the root.

Answered about 8 years ago by Ktash
  • Sorry for the delay in response. Nothing appears to be overflowing, but I'm not entirely sure what I'm looking at with the overflow. I AM getting some scrollable areas, but the element borders all seem to be where they should. Here's what I'm seeing currently: https://lh6.googleusercontent.com/_0wK1o-yYBCI/TX6tNPU_knI/AAAAAAAAACg/bCkQFvvWTv4/s144/borders.PNG I have the site scrolled to the right a bit to highlight that the body element border is correctly placed where the viewing area ends. KevinM1 about 8 years ago
  • For poops and giggles, I decided to add an overflow: hidden property to my header, and that seems to have done the trick. Any idea why it had an overflow problem? I have a couple of relatively positioned elements, as well as floated li's for navigation - could that combo be the culprit? KevinM1 about 8 years ago
  • Not likely. My guess is that the sum of widths, especially if they were set explicitly is greater than your body. Inline elements and the sort should wrap, so block level elements will be your culprit. Without seeing a live copy, its hard to say, but check on all margin and padding and see if any of those add up to more than your width. Ktash about 8 years ago
Jordan 469
0
points

Try adding { overflow: hidden; } to the body css style that you have.

Answered about 8 years ago by Jordan
  • No dice. All that does is cut off the lower half of my layout. KevinM1 about 8 years ago