Freitag, 25. Februar 2011

DIV based liquid 2-column HTML layout with sticky footer

Strangely I was not able to find a similar CSS based page layout example anywhere on the net. Please correct me if I was wrong. The goal was to find a simple 2 column DIV based HTML page layout with a ‘liquid’ content section and a sticky footer. I assumed it would be easy to find it by searching for something like ‘html template div css …’ but probably I was overestimating my ‘googling’ skills. So I spent some hours writing it from scratch. There are probably still some minor bugs though, so be careful. unfortunately I had to introduce a small CSS hack to make it run smoothly with that ‘wonderful’ peace of software called IE6. I’d appreciate any improvement suggestion.

The html should render fine with the latest version IE/Safari/Firefox/Chrome and IE6. Any other/older browser version was not tested yet. Sorry.

BTW this is my first post :)

Page in Firefox 3.6

HTML Code:

<title>Page title</title>
<style type="text/css">

body,html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
overflow: hidden;

#header, #footer, #nav, #content {
background: #ffffff;
position: absolute;
height: auto;
width: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: hidden;

#header, #footer {
background: #dddddd;
width: 100%;

#nav, #content {
top: 119px;
bottom: 24px;

#header {
height: 119px;

#footer {
top: auto;
height: 24px;

#nav {
background: #f2f2f2;
width: 229px;

#content {
left: 229px;
overflow-y: auto;

/* IE6 Hack */
* html #content,* html #nav {
    height: expression(document.body.clientHeight - 24 - 119);

* html #content {
width: expression(document.body.clientWidth - 229);
right: 2px;
<div id="header">Your header</div>
<div id="nav">Your navigation</div>
<div id="content">Your content</div>
<div id="footer">Your footer</div>

Keine Kommentare: