Fixed width css layout gets cut off on lower resolution displays

Posted on 2012-09-01
Last Modified: 2012-09-01
I must be missing something....

I have a fixed width css layout similar to this one:
The total of all columns adds up to about 1200pxls.
Now when I change my display resolution to 1024x768 I would have hoped that the browser (chrome in my case) is smart enough to add a horizontal scroll bar because the content is bigger than the screen. Instead the page is just cut off and I can't scroll to the right.

What gives???
Question by:php-newbie
    LVL 42

    Expert Comment

    by:Chris Stanyon
    It should give you a scrollbar. Any change of seeing a link to your site so we can have a look at the code.
    LVL 7

    Accepted Solution

    Add overflow:scroll to your CSS entry for the container.

    Author Closing Comment

    the problem was that I had a wrapper div class with width: 100% and overflow: hidden. Thanks!
    LVL 7

    Expert Comment

    Glad to be of help

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now