Title: Using 960.gs and sticky footer content div background does not stretch to the bottom of the page
Tags: css;layout
Question: I'm using the 960.gs frameowrk and http://www.cssstickyfooter.com and want to have a separate back ground colour for the main content div. This div won't stretch the background to the bottom of the page.
<div id="wrapper"&gt;
<div id="content" class="container_12"&gt;
<div class="grid_12" id="header"&gt;<a href="/"&gt;<img src=logo.png" alt="" width="145" height="160" border="0" /&gt;</a&gt;</div&gt;<!--header--&gt;
<div class="clear"&gt;</div&gt;
<div class="grid_12" id="navbar"&gt;
<ul&gt;
<li&gt;<a href="/"&gt;Home</a&gt;</li&gt;
<li&gt;<a href="/menu 1"&gt;menu 1</a&gt;</li&gt;
<li&gt;<a href="/menu 2"&gt;menu 2</a&gt;</li&gt;
<li&gt;<a href="/menu 3"&gt;menu 3</a&gt;</li&gt;
<li&gt;<a href="/menu 4"&gt;menu 4</a&gt;</li&gt;
<li&gt;<a href="/menu 5"&gt;menu 5</a&gt;</li&gt;
</ul&gt;
</div&gt;<!--navbar--&gt;
<div class="clear"&gt;</div&gt;
<div class="grid_12" id="content_body"&gt;
<div class="grid_4" id="sidebar"&gt;
sidebar left
</div&gt; <!--sidebar--&gt;
<div class="grid_7" id="body_right"&gt;
body right
</div&gt; <!--body_right--&gt;
</div&gt; <!--content_body--&gt;
<div class="clear"&gt;</div&gt;
</div&gt;<!--content--&gt;
</div&gt; <!--wrapper--&gt;
<div id="footer"&gt; footer </div&gt; <!--footer--&gt;
html, body, #wrapper {height: 100%;}
body &gt; #wrapper { height: auto; min-height: 100%; }
/* must be same height as the footer */
#content { overflow: auto;
padding-bottom: -1.5em;
#footer {
position: relative;
margin-top: -1.5em; /* negative value of footer height */
height: 1.5em;
clear: both;
/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
content: "";
height:100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J */
body {
min-width: 960px;
background: #E9F2F9;
div#header{
background-color: #3399cc;
div#navbar {
background-color: #FF9900;
div#navbar  LI{
margin: 0 auto;
display: inline;
padding-right: 5px;
div#content_body{
background: #9CC4E4;
Comment: Investigating using javascript to calculate a height which i can insert into content_body


Here is another answer: You have a div class="clear" but clear isn't defined in your CSS - you need to specify "clear:both" in a .clear CSS class.
Comment for this answer: .clear is defined as part of the 960.gs framework as: .clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 2.5', 'CreationDate': '2010:00:11/02/10', 'FavoriteCount': 0.0, 'PostTypeId': 1, 'Tags': '<css><layout>', 'Title': 'Using 960.gs and sticky footer content div background does not stretch to the bottom of the page', 'ViewCount': 1004, 'id': 4074467, 'user_AboutMe': '', 'user_AccountId': 230533.0, 'user_DisplayName': 'Charles.F.B', 'user_Reputation': 21.0, 'user_Views': 1.0, 'user_id': 494206.0}}