When I started using CSS I quickly ran into the problem of having unequal heights in the different columns of the design. This was extremely frustrating at the time.
I remember using all sorts of tricks to overcome the problem.
The most basic trick was to give the different columns the same background color which would simply hide the problem. I travelled down the road of Faux Columns (a method of using graphics to make it seem as if all columns had the same height), but somehow it just did not seem to be the way to go. I tried different Javascript tricks to solve the problem. These worked but were adding unnecessary overhead to the design. Some time ago I stumbled across a solution that involved no hacks, no graphics and also no Javascript.
I have tried searching for the original article I found but could not find it. All I can remember is that the author was named Alec or Alex. If anyone knows who the author was, please contact me as I would love to give credit where it is due.
In the introduction to the article the author had written:
“Stop thinking out of the box, start adding something around the box.”
These words I have never forgotten because this was exactly what the solution to the unequal heights was based upon.
I considered giving a detailed explanation on how to solve the problem here but decided against it. Instead I will rather provide the link where you can view a demo for yourself, as well as a further link where you can download the relevant files.
Just by the way, the solution, as it is at present is valid XHTML 1.0 Strict and the CSS validates as CSS Level 2.1.
I have tested the solution in Firefox 2, Internet Explorer 7 and Internet Explorer 8 Beta. The layout works just fine in all these browsers.
This simple solution has the added advantage that the text is re-sizable within a browser.
This layout could very easily be chopped up into the different pages and the necessary PHP added to turn it into a blogging template. I do hope you can find some use for the layout.
If you know of a better solution I would definitely love to hear about it as this is something that I use on a regular basis.
Looks great in Safari & Firefox on OSX too
Thanks a lot, this is something that I am not able to check. I have just visited your site, impressive. I am snowed under right now but I have subscribed to your feed so that I can stay up to date with your latest content. I will be popping in soon.
also i find another way to solve this.. it seems simpler. u can find it at this url:
http://www.ejeliot.com/blog/61
Thanks Mahmoud. I have had a look, they have quite a few solutions there. The one is faux columns, another uses Javascript - these two I am not interested in. The other ways also shown look very promising and I will visit there again to get more details. Thanks for the link.