CODEWITHSUNDEEP
htmlcss
Joe Engle
Joe Engle

Reputation: 197

How to create a horizontal scroll bar when shrinking the window

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;
}

Upvotes: 2

Views: 5094

Answers (2)

user1853788
user1853788

Reputation:

try this:

<div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; overflow-x: scroll;">

overflow property should give you your scroll bar.

Upvotes: 2

piruchex
piruchex

Reputation: 59

You may try adding this property to the body tag:

overflow-x:auto;

Upvotes: 2

Related Questions