I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.
Here is a link to the layout so far
You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.
Here is the current HTML:
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}/* mac hide \*/
html { height: 100%;}
* html #wrap {height: 100%;}/* end hide */
body {
background: #FFFFFF;
color: #fff;
height:100%;
min-width:800px;}
#inner {
position:relative;
width:100%
}
#wrap {
min-height: 100%;
margin-left:50%;
position:relative;
background:#F9F9F9;
color:#000;
z-index:1
}
#center_col {
float: left;
width: 800px;
height: auto;
margin-left:-380px;/* drag it central on the page*/
position:relative;
display:inline;/* ie double margin bug*/
background:#FFFFFF;
}
#sidebar {
width:204px;
height: 100%;
padding-right:26px;
float:left;
min-height:234px;
position:relative;
background: #FFFFFF;
}
#content {
width:570px;
height: 100%;
min-height: 100%;
position:relative;
float:left;
background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;
padding-top:21px;
padding-bottom:48px;
}
.postunit {
width: 500px;
margin-left: 30px;
padding: 10px 5px 20px 5px;
background: #FFFFFF;
border: 1px solid #F9F9F9;
}
.sidebar {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 50px;
padding-left: 10px;
float: left;
height: auto;
width:200px;
-moz-border-radius: 10px;
border-radius: 10px;
}
p{
padding:5px;
margin-bottom:1em;
}
</style>
<!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="center_col">
<div id="sidebar">
<div class="header">
<h1>{Title}</h1>
<p>{Description}</p>
</div>
{block:ListSidebar}
<div class="profile">
<a href="{ProfileLink}">
<img src="{PortraitURL-45}" width='75' height='75'>
</a>
<p>{Profile}</p>
</div>
{/block:ListSidebar}
</div>
<div id="content">
<div class="posts">
{block:Posts}
<div id="postunit_{PostID}" class="postunit">
{block:EditBox/}
<div class="post">
<h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
<a class="button" href="{Permalink}">Posted {TimeAgo}</a>
{Body}
</div>
{block:Responses}
{block:ResponsesList}
{/block:ResponsesList}
{block:Sharing}
{block:Tweet /} {block:FbLike /}
{/block:Sharing}
<div class="postresponses">
<a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
</div>
{block:ResponsesShow}
{Responses}
{ResponseForm}
{/block:ResponsesShow}
{/block:Responses}
</div>
{/block:Posts}
</div>
{block:Pagination/}
</div>
</div>
</div>
</div>
</body>
</html>
Answer
Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!