Help with Overflow property and Scrollbars!

**xCJPECKOVERx** · 04-28-2013, 01:42 AM

Hi, So as the title suggests, I'm having trouble with overflow.

What I want is the header and footer to be fixed, with the body content to be scrollable when it has to.
So I went as set the header and footer positions to fixed, then for header top:0 and footer bottom:0.

However, once I set the header and footer positions to fixed, I can no longer scroll through the body content, despite the overflow value of 'auto'.

Here's my HTML:

Code:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
        xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>Game Stuff</title>
        <meta name="description" content="">
        <meta name content="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directiory -->

        <link type="text/css" rel="stylesheet" href="css/normalize.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="css/source_sans.css"/>
        <script type="text/javascript" scr="js/vendor/modernizr-2.6.2.min.js"></script>
        <script type="text/javascript" scr="js/jquery1.9.js"></script>
        <script type="text/javascript" onscroll="js/global.js"></script>
    </head>

    <!-- Website Body -->

    <body>
        <!-- HEADER -->
        <div id="header">
            <div id="headerContainer">
                <img id="logo" src="img/logo.png" />
                <div id="menuContainer">
                    <ul id="menuList">
                        <li class="menuItem">
                            Media
                            <ul class='subMenu'>
                                <li>Montage</li>
                                <li>Music</li>
                            </ul>
                        </li>
                        <li class="menuItem">
                            Animation
                        </li>
                        <li class="menuItem">
                            Resources
                        </li>
                        <li class="menuItem">
                        Contact & FAQ's
                        </li>
                     </ul>
                 </div>
                <div class='clearFloat'/>
            </div>
        </div>

    <!-- BODY -->
        <div id="body">
            <div id="contentWrapper">
                <div id="newsWrapper">
                    <div class='newsPostWrapper'>
                        <img class='newsImage' alt='newsImage' src='img/newsImage.jpg'/>
                        <div class='newsTitle'>
                            News!
                            <span class='newsDate'>THIS IS THE DATE</span>
                        </div>
                        <div class='newsContents'>
                            
                        </div>
                        <div class='newsAuthor'>I AM THE AUTHOR</div>
                    </div>
                    <div class='clearFloat'></div>
                </div>
            </div>
        </div>

    <!-- FOOTER -->
        <div id="footer">
            <div id="footerContainer">
                <p>I MADE THIS WEBSITE!</p>
            </div>
        </div>
    </body>
</html>

And here's my CSS:

Code:

/** GLOBAL STYLES **/

* {
    padding: 0;
    margin: 0;
}
.clearFloat{
    clear: both;
}
body{
    margin: 0;
    font-size: 15px;
    font: Arial;
}

/** HEADER STYLES **/

#header{
    width: 100%;
    top: 0;
    position: fixed;
}
#headerContainer{
    width: 100%;
    max-width: 900px;
    margin: auto;
    background-color: #eeeeee;
}
#logo{
    display: block;
    width: 12%;
    float: left;
    margin-left: 10%;
}

/** Menu **/

#menuContainer{
    float: left;
    width: 70%;
    margin: 75px 0 0 30px;
}
#menuList{
    list-style: none;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}
#menuList .menuItem{
    font-size: 15px;
    display: inline-block;
    padding: 3% 7%;
    background-color: #555;
    color: #eeeeee;
    position: relative;
}
#menuList .menuItem:hover{
    background-color: #eee;
    color: #555;
}

/** Trigger **/

#menuList .menuItem:hover .subMenu{
    /*display: block;*/
}

/** Sub Menu **/

.subMenu{
    display: none;
    /*display: block;*/
    list-style: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #555;
    width: 100%;
}
.subMenu li{
    padding:  5% 10%;
    color: #eee;
}
.subMenu li:hover{
    color: #999;
}


/** BODY STYLES **/


#body{
    min-height: 200px;
}
#contentWrapper{
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
#newsWrapper{
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 5% 0;
}
.newsPostWrapper{
    width: 90%;
    padding: 5%;
}
.newsImage{
    width: 100%;
    max-width: 600px;
    display: block;
    padding: 1.5% 0;
}
.newsContentWrapper{
    float: left;
    width: 100%;
    max-width: 600px;
}
.newsTitle{
    position: relative;
    font-size: 20;
    line-height: 24px;
    padding: 3%;
}
.newsDate{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
    line-height: 20px;
    padding: 3% 0;
    width: 25%;
}
.newsContents{
    padding: 3%;
}
.newsContents p{
    color: #222;
}
.newsAuthor{

}


/** CHANGING LAYOUT BASED ON SIZE **/
@media screen and (min-width: 600px){
    .newsImage{
        width: 33%;
        float: left;
    }
    .newsContentWrapper{
        float: left;
        width: 66%;
    }
}


/** FOOTER **/
#footer{
    width: 100%;
    bottom: 0;
    position: fixed;
}
#footerContainer{
    width: 100%;
    max-width: 900px;
    margin: auto;
    background-color: #eeeeee;
}
#footerContainer p{
    text-align: center;
}

NOTE: If anybody's wondering, this is just for a dinky school project lol. Also, just insert random stuff in newsContents for body text.

Thanks in advance for any help!!!
CJ.

**xCJPECKOVERx** · 04-28-2013, 02:41 AM

Oh, I figured it out! Forgot a container.

However, now that it scrolls, for some reason the newsTitle, and newsDate scroll over the header, but nothing else does...

CJ.

Thread: Help with Overflow property and Scrollbars!

Thread Tools

Search Thread

Help with Overflow property and Scrollbars!

Similar Threads

Overflow and Scrollbars

overflow scrollbars are showing for a hidden item - i need to hide them

Image Thumbnail Viewer Script - making scrollbars overflow

OVERFLOW property Question (Netscape)

Div with scrollbars (Dynamic Scrollbar/ DHTML scrollbars)

Bookmarks

Bookmarks

Posting Permissions