[thelist] CSS: 3 column layout with footer

James Hardy evolt at weeb.biz
Wed Nov 30 04:39:54 CST 2005


Hi all, I am trying to replace a table based layout with a nice CSS div 
based layout, and am coming up against a problem. Specifically I want to 
mimic the current layout ( http://www.filmnight.com/ ) which is a layout 
like this:

------------------------
|                      |
|----------------------|
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|----------------------|
|                      |
------------------------

On my dev site (sorry no external access) I have used the 3 column 
technique from http://glish.com/css/7.asp (though replacing the ugly 
voice family hack with IE conditional comments), however the problem is 
that I can not get a full width footer that lies below all three 
columns. As the left and right column are absolutely positioned, the 
footer ignores them for layout, and positions it directly under the 
content. If the content is shorter than the left and right columns, the 
footer overlaps them. As the contents of all three columns will be 
dynamically generated I can have no idea of the height in advance. I 
suppose I could set the min-height of the centre column to be something 
greater than the left and right could ever be but this would result in 
ugly white space when all three columns are shorter than this and would 
not work in IE anyway. Any ideas?

-- 
James Hardy




More information about the thelist mailing list