May 17th, 2012 
admin A problem I have had for ages when working with layout, is what happens when there is not much to display on screen. Specifically, what happens to the footer?
When you have pages of data, the footer goes at the end, and it all looks normal. You reach the bottom and can go no further.
But when you have less than a page full of data, the footer is not at the bottom. There is an ugly empty space below it, and it looks silly.
During the course of my searching, I have found numerous solutions.
The first one I found was here: http://www.cssplay.co.uk/layouts/layout.html
This seemed to do the trick, until I tried viewing it on my tablet, when it broke. Also, if you look at the CSS its full of hacks and is virtually unreadable to me.
The second place I looked was here: http://peterned.home.xs4all.nl/examples/csslayout1.html
This worked fine at first, with the caveat that you need to let the background of the central content be controlled by the wrapper div. If you set a different background for the central content you will see that it is not actually stretching to the bottom of the screen at all.
(This is the real problem. Why can’t you just assign a height of 100% to that central div and let the browser work out the rest?)
However, as soon as you add a second column to this layout, you have a problem. Unless the second column has the same colour background, you run the risk of having it stop short of the bottom of the page.
No, what I want is a layout that allows for multipe columns, with different backgrounds in each column.
And I’ve finally worked out how to do it!
The image above shows the same web page through two different browsers. The IE window is bigger, and the footer is at the base of the page. The Chrome window is smaller, and the footer has scrolled off screen.
You can view the page yourself here:
The first (bugged) demo.
Now, the simple way to do this would have been to adapt the old faux-column technique, and give the wrapper div a background image that showed two columns. However, that introduces an image file which has to be edited every time the column width changes in your design. Plus, the technique seems to be frowned upn these days.
Instead, the solution relies on a little lateral thinking.
The second column is wrapped in an absolutely positioned div, with margins to avoid the header and footer.
But hang on a second, you would think that that would cause havoc once the page got bigger than the window. Well, no it doesn’t, because thats when the wrapped DIV takes over.
Its a very neat trick.
Unfortunately, in its current form, there is a snag. If the menu column has more content than the main column, then the header moves up the page. So this solution isn’t ideal. There was also a sizing issue in Firefox.
However, I didn’t give up there. Instead I ploughed on, and came up with this technique:
If you have ever used the WordPress admin panel, this layout will look familiar. I basically reverse-engineered it and stripped it to the bone, when I realised that it used the exact technique I was looking for.
Here’s is the complete code for the demo. Note that it is all done using CSS. No javascript whatsoever is used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
html,body {
height:100%;
margin:0;
padding:0;
}
body {
font-family:sans-serif;
font-size:12px;
line-height:1.4em;
min-width:600px;
color:#333;
}
#wrapper {
height:auto;
min-height:100%;
width:100%;
position:relative;
}
#maincontentwrap {
height:100%;
color:#333;
}
#maincontentwrap,#footer {
margin-left:165px;
}
#maincontent {
padding-bottom:65px;
float:left;
width:100%;
}
#menuback,#menuwrap,#menu {
width:145px;
}
#menuback {
position:absolute;
top:0;
bottom:0;
z-index:-1;
}
ul#menu {
clear:left;
margin:0;
padding:0;
list-style:none;
}
.clear {
clear:both;
}
#menuback,#menuwrap {
border-width:0 1px 0 0;
border-style:solid;
background-color:#ececec;
border-color:#ccc;}
#menuwrap {
position:relative;
float:left;
}
#maincontentwrap, ul#menu {
padding-top:28px;
}
#header * {
height:auto;
width:auto;
margin:0;
padding:0;
}
#header {
color:#ccc;
font:normal 13px/28px sans-serif;
height:28px;
position: absolute;
top:0;
left:0;
width:100%;
min-width:600px;
z-index:99999;
background-color:#464646;
}
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
padding:0;
margin: 0 0 0 146px;
border-top-width:1px;
border-top-style:solid;
border-color:#dfdfdf;
background-color: #444;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menuback"></div>
<div id="menuwrap">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li>Option 10</li>
</ul>
</div>
<div id="maincontentwrap">
<div id="maincontent">
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</p>
<div class="clear"></div></div>
<div class="clear"></div></div>
<div id="footer">
This is the footer
<div class="clear"></div>
</div>
<div id="header" >
This is the header
</div>
<div class="clear"></div></div><!-- wrapper -->
</body>
</html>
I would be interested to hear of any problems people have with the code.
