1

I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>&lt;PageTitle&gt; | Anga Designs</title>
<!-- Stylesheets -->
        <link rel="stylesheet" type="text/css" href="css/standard.css" />
            <!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
    </head>
    <body>
<div id="bgstripe"></div>
<div id="outercontainer">
    <div class="leftbar"></div>
    <div id="innercontainer">
        <div id="header">
            <div class="leftbar"></div>
            <div class="innercontent">

            </div>
        </div>
        <div id="content">
            <div>
                <span class="articletitle">Page Title!</span>
                <div class="articletitlebar"></div>
            </div>
            <div class="articletext"><p>
                Put your text here
            </div>
        </div>
    </div>
    <div id="faderight"></div>
</div>
<!-- /container -->
    </body>
</html>

CSS

body, html {
    margin: 0;
    background-color: #eeeeee;
    height: 100%;
    font-family: Tahoma;
    overflow: auto;
}

#bgstripe {
    float: left;
    background-color: #67a7ff;
    width: 50%;
    height: 100%;
}

#faderight {
    position: relative;
    float: right;
    background: url('../images/layout/fade-right.jpg');
    width: 50px;
    height: 100%;
}

#outercontainer {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 100%;
    background-color: #2a5d95;
}

#innercontainer {
    position: fixed;
    float:left;
    width: 950px;
    background-color: #2a5d95;
}

.leftbar {
    position: absolute;
    background: url('../images/layout/leftbar.png');
    width: 50px;
    height: 100%;
}

.innercontent {
    position: relative;
    float: left;
    background-color: #2a5d95;
    height: 100%;
    width: 100%;
    margin-left: 50px;
}

#header {
    position: relative;
    float: left;
    width: 950px;
    height: 200px;
}

#content {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}

.articletitle {
    background-color: #003366;
    padding: 10px 10px 10px 60px;
    font-size: 20px;
    font-family: Georgia;
    color: #eeeeee;
}

.articletitlebar {
    position: absolute;
    width: 50px;
    height: 40px;
    background: url('../images/layout/articletitlebar.png');
    margin-top: 10px;
}

.articletext {
    display:block;
    position: absolute;
    margin-left: 70px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    width: 700px;
    min-height: 500px;
}

Anyone who can help me with this? I'm totally lost right now.. Online sample: http://rune.blupfis.nl/wendy/

1
  • Do you have an online sample we can look at?
    – a_m0d
    Jan 16, 2012 at 19:46

2 Answers 2

1

position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.

4
  • yep, on the innercontainer position:absolute fixes the scroll but screws up the layout at the bottom. i think you should look for online samples of this layout. Jan 16, 2012 at 19:58
  • Thanks, I totally missed that.. Scrollbars appearing now! :) Jan 16, 2012 at 20:00
  • Small problem still: When scrolling down, the bottom will be white.. Any idea how to fix it? Can't find that problem either :S Jan 16, 2012 at 20:08
  • @Rune - Don't have my tools with me now. You probably should start a different question.
    – Rob
    Jan 16, 2012 at 21:10
0

The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:

#content {
  float: left;
  height: 500px;
  overflow: auto;
  position: relative;
  width: 100%;
}

you should see the scroll bars appearing (but some other styling may be lost now).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.