Menu
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:
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 :)
201
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 */
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
