Remember the good old days, when we used tables for almost every layout problem we had to face? Those were rebellious days, where no one ever cared about semantics and clean code *sig* I’m getting nostalgic…
Today things are different, but fortunately the W3C gave us some neat CSS properties to make normal HTML elements behave like tables. However, they live a hidden life, while designers still use floats and negative margins to find what is considered to be the Holy Grail of Webdesign (aka fluid multi-column layout). Floats were used for a good reason, since IE6 & 7 weren’t able to render CSS tables, but IE8 was released almost three years ago, so I guess it’s time to abandon floats in favour of CSS tables and approach to a more modern kind of Holy Grail.
So, if you can’t go with graceful degradation when it comes to IE7 and below, you probably should stop reading here, but everyone else who wants to know how to achieve a flexible layout grid, including full height columns and a sticky footer, that works in IE8+, Firefox 2+, Safari 4+, Opera 8+ and Chrome 10+ (probably even more), should download the examples and read on.
Continue reading This CSS layout grid is no Holy Grail