Grow your CSS skills. Land your dream job.

Unwanted horizontal scrollbar; site secretly too wide?

  • # October 22, 2009 at 10:17 am

    Hello, I have a site with an unnecessary horizontal scrollbar, and I can’t figure out what’s forcing multiple browsers to think the page is wider than it’s intended to be.

    Link to the page (pardon the roughness, it’s a work in progress): http://www.alliedfence.com/dev/

    Here’s a screenshot: http://i37.tinypic.com/20u4xuf.png

    My CSS file includes:

    .post,#content .page{
    clear:both;
    margin:0em auto 0em;
    overflow:visible;
    width:80em;}

    When I drop the width down to 72em or so, the scrollbar disappears, but then the content is significantly narrower than the header/footer. As you can see on the page, there’s plenty of whitespace on either side.

    (I also don’t want to use overflow-x to just hide the scrollbar, because I want it to be visible if someone’s viewing the site in a really low-resolution/small browser window. Plus it doesn’t seem like a clean fix.)

    This is probably something really stupid and easy, but I’ve been poring over it for ages, and I’d really appreciate any help! Thanks so much.

    # October 22, 2009 at 3:00 pm

    try using percentage instead of em for width? just an idea you could play around with.
    http://css-discuss.incutio.com/?page=EmVsPercentWidths

    # October 22, 2009 at 3:52 pm

    Thank you for the suggestion and the link!

    Unfortunately when I try using percent instead of em, I have to go up to at least 140%, and it renders very differently across browers — plus the scrollbar is still there.

    On the other hand, what your link is saying about larger font-size and em causing problems makes sense: my font-size is 16px/1em, and when I drop it down the scrollbar vanishes. But then not only is the text size smaller, but the whole page renders much narrower.

    Any thoughts?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".