How to limit the horizontal scroll when visitng a website

Posted on 2009-05-02
Last Modified: 2012-08-13
How can you limit the horizontal scroll when someone visits your website? If you go to
or  or for example there is no horizontal scroll bar at all. Some sites have horizontal scroll bars, but you can only scroll to the right about a half an inch.

I ask this because I have created a website. The website has a banner image that is
1260 x 170 pixels. It looks good, but when viewed in a browser, their is a horizontala scroll bar that allows the application user to scroll horizontally to the right by about two inches.  

Also if the website is viewed on a really wide screen, the end of the banner image is visible and looks too short.

Question by:brgdotnet
    LVL 29

    Accepted Solution

    Using CSS:

    body { overflow: none; }

    Then if you need scrolling elsewhere, you can explicitly enable it:

    spill { overflow: auto; }
    LVL 2

    Author Comment

    I think you meant "overflow: hidden"

    I tried that and "overflow: auto; "

    but they are not working. With "overflow: auto" I get scroll bars embedded in my web page that are not part of the browser. So the problem is still unsolved.
    LVL 2

    Author Comment

    I want to add more points for this question. I don't see a link to edit the question and to increase the points, so I will delete this question and re-post it with some sample source code. So if anyone has a solution, please respond to my new question.
    LVL 2

    Author Closing Comment

    Badotz, you are correct. I mad a mistake and told you it was wrong. But your solution does work. Thank you!
    LVL 29

    Expert Comment

    No worries - glad to help.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    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

    14 Experts available now in Live!

    Get 1:1 Help Now