How to create a horizontal scroll bar when shrinking the window


Tags: html,css

Problem :

If I have a content area with a width of 1225px how do I make it so that when you shrink the page to less than that width a horizontal scroll bar appears so that that center content will always be visible (at least have the option for scrolling)? Would it involve using fixed or absolute positioning?

In this site, you can see when you shrink the page, the horizontal scroll bar appears: http://www.websitecodetutorials.com/

I don't know if it helps, but here is some of my code:

<body class="fullbackground">
    <img class="fullbackground" src="background.png" />
    <div class="topbackground">
            <div class="top">
                <div class="topleft">
                    <img class="pf_logo" src="pathfinder_logo.png"/>
                </div>
                <div class="topmiddle">
                    <h1 class="title">Pathfinder is Temporarily Unavailable</h1>
                </div>
                <div class="topright" ></div>
            </div>
        </div>
        <div class="bar"></div>
        <div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
        <div class="contentcontainer">

I used a CSS reset. Here is some of my CSS:

.bar {
    background-color:#365C8C;
    height:30px;
    width:auto;
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow-x:hidden; 
}

body {
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow-x:hidden;
    height:100%;
    width:100%;
    background-color:#ADCCEB;
    /*background-color:black;*/
    /*background: url(background.png);*
    /*background-size:100%;*/
}

.bold {
    font-weight:bold;
}

.contentcontainer {
    width:825px;
    height:870px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

.extcontentcontainer {
    width:825px;
    height:645px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

img.fullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    height:100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

img.extfullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    height:100%; 
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}


Solution :

You may try adding this property to the body tag:

overflow-x:auto;


    CSS Howto..

    How show button hovering above an image or pressing over it? [closed]

    jQuery - How to show element when another has a value

    How to use a divider in a navigation with list elements?

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    How to set size of a checkbox in table vaadin

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    How to reduce spacing between navigation links CSS

    How to make a moving dashed border with CSS?

    Ruby on Rails: (Beginner) How can I make my style sheet (in public/stylesheet folder) be used by my layouts?

    How can I use a different CSS using jQuery?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to draw rectangle on the website to highlight?

    how to change an existing website to bootstrap [closed]

    How to reorganize the page using “div” and “css”?

    How do I give a WordPress Custom Menu item an id or class for CSS targeting?

    How to display a div over other containts of an html page?

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How to separate image folder and css folder to work with eachother in maven project

    How to float left without wrapping to next line?

    How to set the height with css to 100% and make it fluid?

    Image div showing in Safari, Chrome and IE but not in Firefox

    How to make CSS visible only for Android phone UC browser

    How to show text on image when hovering?

    How to fit whole image in to div which have his dimensions

    CSS: How to make a responsive grid without a framework

    How to rotate a line(x1=50,y1=50,x2=50,y2=10) with respect to x=50,y=50 as center using CSS?

    Using css modules how do I define a global class

    how to make keyframe animations in chrome

    How to edit itemprop in div class in CSS? (Wordpress)

    how to make a image in div to be dragged just downwards using html5 css jquery animation?