View Full Version : 2 column liquid layout, footer at bottom

05-08-2007, 10:57 PM
I can't find a 2 column layout (left static, right fluid/liquid), with a footer that sticks to the bottom (expands container) that works in modern browsers + ie6/7. The one on bonrouge doesn't work in ie7 (it adds a horizontal scrollbar when the text exceeds 100% height).

So, I "stuck" together one from two layouts from ALA (this (http://alistapart.com/d/negativemargins/ex4.htm)and this (http://alistapart.com/d/footers/footer_css2.html)), giving me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;padding:0;margin:0
#wrapper {
position: relative;
min-height: 100%;

#header {
background: #d7dabd;
#container {
width: 100%;
background: black url(background.gif) repeat-y right;
float: left;
margin-right: -200px;

#content {
background: #f1f2ea;
margin-right: 200px;
#sidebar {
width: 200px;
float: right;
#footer {
background: #d7dabd;position: absolute;
bottom: 0;
h1 {
margin-top: 0;
.last {
margin-bottom: 0;
.clearing {
height: 0;
clear: both;

<div id="header">header</div>

<div id="wrapper">
<div id="container">

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>

<div id="sidebar">

<li>link one</li>
<li>link two</li>
<div class="clearing">&nbsp;</div>
<div id="footer">footer</div>

Problem is, the footer goes its height UNDER the browser window. Idk where to add a (negative) margin or padding to get it normal (in the visible part of the window).