3

How can I make sure that this DIV's background color fills the whole DIV. I set the min-height to 100% and everything below 100% does not have a white background. I have a #global_container to make sure that the page scrolls (not the div), and a #middle to keep all the content. What am I doing wrong here? Here's a screenshot:

As you can see the background color does not fill the entire DIV

Here's the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Groop</title>

<!--Connection to other files -->
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,300' rel='stylesheet' type='text/css'>
<script src="jquery-1.10.0.min.js"></script>
    <script src="animations.js" type="text/javascript"></script>
    <script src="jquery.expander.js"></script>
    <script src="resizable.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.9.1.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>

<body>
<div id="header">
    <div id="header_center">
        <img src="groop.png" height="50px" width="auto" />
    </div>
</div>

<div id="global_container">

    <div id="middle">

        <!-- Left contains everything you wanna do today-->
        <div id="left"> 

            <!-- Lists everything that you're planning to do NOW --> 
            <div class="list_title"><strong>The Now List</strong></div>

            <ul id="tomorrow_list">

            </ul>        

        <!-- End of left -->  
        </div>

        <!--Right contains stuff that's upcoming-->
        <div id="right">
            <div id="newcontent">
                <textarea id="textbox" rows="2" placeholder="Any assignments?"></textarea> 
            </div>

            <div id="content">
                    <div>
                        <div class="due_title">Due Today</div>
                        <ul class="inlist">
                            <li><div class="list_item" id="list_item">Do math homework if it's really long asldgjka;lskdgj a;lk ja;lsk jgal;sdkjg  as;dgkj a;sdgj ;asd;lkgj ; lkjasdg; ja; a;sdgk j;a j;adsjg ;aklsjd ;a ja;sdlgk ja; a;ds jg;alk ;adj g;adsj g;asdkg ja;kj l;ajg a; j</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due Tomorrow</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
            </div>

        <!-- End of right-->    
        </div>

        <!-- End of middle --> 
    </div>
    <!-- End of global container -->
</div>

And here's the CSS: 

a:link
{
    text-decoration:underline;
}

a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
color:#115685;
}

a
{
font-family:'Helvetica Neue', sans-serif;
color:#1A71AD;
}

html, body
{
background-color:#e9e9e9;
margin:0;
}

#header
{
position:fixed;
top:0px;
right:0px;
left:0px;
background-color:#208ff6;
border-bottom:1px solid black;
height:50px;
width:100%;
z-index:1;
}

#header_center
{
width:860px; 
height:auto;
background-color:#147DB5;
margin-left:auto;
margin-right:auto;  
}

#header_center img
{
position:relative;
float:left;
margin-left:0px; 
top:5px;
}

#global_container
{
position:absolute;
height:100%;
width:100%;
overflow:auto;
}

#middle
{
position:relative;
margin-top:50px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
width:860px;
min-height:100%;
height:auto;
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
background-color:white;
}

/* Everything that is on the left */

#left
{
position:absolute;
min-height:100%;
/*height:auto;*/
width:30%;
margin-left:0px;
}

/* Everything that's on the right */

#right
{
position:absolute;
min-height:100%;
/*height:auto;*/
margin-left:30%;
width:70%;
border-left:1px solid #d0d0d0;
font-family:'Titillium Web', sans-serif;
font-weight:200;
}

#textbox
{
resize:none;
outline:none;
font-family:'Helvetica Neue', sans-serif;
font-size:1em;
margin-top:10px;
margin-left:10px;
margin-right:10px;
width:95%;
padding:5px 5px 5px 5px;
border:1px solid #d0d0d0;
font-weight:300;
}

.list_title
{
float:left;
margin-top:10px;
margin-left:10px;
font-family:'Titillium Web', sans-serif;
font-weight:200;
font-size:1.5em;
color:#208ff6;
}

#postit
{
float:left;
margin-top:5px;
margin-left:10px;
border: 1px solid #147DB5;
background: #208ff6;
color: white;
font: normal 0.8em 'Titillium Web', sans-serif;
font-weight:300;
padding: 4px;
cursor: pointer;
width:55px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#postit:hover
{
border: 1px solid #147DB5;
background: #147DB5;
color: white;
font: normal 0.8em 'Titillium Web', sans-serif;
font-weight:300;
padding: 4px;
cursor: pointer;
width:55px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#newcontent
{
width:100%;
height:auto;
overflow:hidden;
padding-bottom:5px;
}

#content
{
width:100%;
height:auto;
overflow:hidden;
}

#content div 
{
width:100%;
}

.due_title
{
color:#208ff6;
margin-left:10px;
margin-top:20px;
font-size:1.2em;
}

h1
{
color:#208ff6;
margin-left:10px;
margin-top:10px;
font-size:1.2em;
}

hr 
{
    display: block;
    height: 1px;
    border: 0;
    /*border-top: 1px solid #208ff6;*/
border-top:1px solid #d0d0d0;
    margin:5px 0px 0px 0px;
    padding: 0;
}

.inlist
{
margin-left:30px; 
margin-top:0px; 
font-size:1em; 
font-family:'Helvetica Neue',sans-serif;
color:black;
font-weight:300;
}

.list_item
{
padding:10px 10px 10px 0px; 
}

Ultimately, I want the #middle to include all the items in it (and dynamically grow its own height), and have the page scroll accordingly. I DO NOT WANT THE #middle TO SCROLL BY ITSELF. I WANT TO ADD HEIGHT TO THE #global_container AND HAVE THE GLOBAL CONTAINER SCROLL, not #middle by itself.

Here is a jsfiddle: http://jsfiddle.net/VM6jf/

Thanks :)

UPDATE:

Thanks for all the replies, guys! What I was doing wrong was that I was abusing absolute positioning. I removed absolute positioning from the #left and #right columns and everything went smoothly. Special thanks to guys who suggested using float:right and float:left ... It's 1am where I am right now, so I'll need to get some sleep. Will try it out tomorrow though :)

taevanbat
  • 425
  • 1
  • 8
  • 17
  • possible duplicate of [How come my float elements aren't within their parent](http://stackoverflow.com/questions/4631540/how-come-my-float-elements-arent-within-their-parent) – Quentin Jun 19 '13 at 15:38
  • You can't get what you want with absolute positioning. The height 100% on the global container is limiting the height. Messing with your fiddle now to demonstrate. – Andrew Jun 19 '13 at 15:38
  • @Quentin he's not floating, this is absolute positioning used wrong. – Andrew Jun 19 '13 at 15:39
  • Thanks @Andrew I'll check out the fiddle once you're done – taevanbat Jun 19 '13 at 15:40
  • Several good answers below, actually, see ogc-nicks. – Andrew Jun 19 '13 at 15:43

4 Answers4

3

Both your columns are absolutely posiioned which takes them out of the Normal flow (thanks commenter). You should use floats instead, with a clear fix of some sort on the container div to force it to size itself to the content.

Your Background is only as tall as the viewport is.

#middle {
    overflow:hidden;/* Or any other clear fix that works for your site */
}
#left {
    float: left;
    width: 30%;
}
#right {
    border-left: 1px solid #D0D0D0;
    float: right;
    font-family: 'Titillium Web',sans-serif;
    font-weight: 200;
    width: 69%;/* Has to be less than 70% since there is a border, consider a wrapper element for the border */
}
Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
2

http://jsfiddle.net/zWvtC/1

Remove absolute positioning from right and left divs so that no matter which is high, the background will always reach he bottom

#right
{
    min-height:100%;
    /*height:auto;*/
    margin-left:30%;
    width:70%;
    border-left:1px solid #d0d0d0;
    font-family:'Titillium Web', sans-serif;
    font-weight:200;
}

#left
{
    min-height:100%;
    /*height:auto;*/
    width:30%;
    margin-left:0px;
}
km6zla
  • 4,787
  • 2
  • 29
  • 51
  • 2
    This would only work if the right column was always taller than the left column. It's better to make things rock solid so the issue doesn't come up again in the future. – Matthew Darnell Jun 19 '13 at 15:42
1

You should be floating your #left and #right columns instead of absolutely positioning them.

Here are a few steps you can take to achieve the results I believe you're looking for.

  1. Add clearfix to your #middle div.
  2. In the HTML, move #left below #right (since right will be floated to the right).
  3. Remove position: absolute; from #left and #right
  4. Remove the left margin from #right

Result: http://jsfiddle.net/VM6jf/7/

You don't need to float #left as by floating #right to the right will cause the #left to collapse into the empty space made on the left.

Axel
  • 10,732
  • 2
  • 30
  • 43
1

you can also live your code without changes and just add overflow:auto to your #middle in css:

#middle{
 ....
 ....
 ....
 overflow: auto;  /* add this line */
}
medBouzid
  • 7,484
  • 10
  • 56
  • 86