It’s a bad idea to use heights on elements.
remove that and your regions will naturally expand to fit the content. If for some reason you want those heights to be a starting point then use min-height. instead of height ( if you also wish to support older IE you will need to add a conditional comment<!-- if [ie lt8] <style> your CSS for IE goes here </style>–> with the same values as height ( because old IE interprets height: as min-height anyway.
Thanks for the code you wrote for me. Sorry I didn’t send what I had written myself; I had written too many of them trying all sort of things but I must quickly say that your code worked perfectly as I wanted. What is new to me in your code is the “display: table”, “display: table-cell” and the hacking of IE. I would study it well and if I don’t understand it, I would please write to you hoping to receive your help again.
display: table and table-cell are available in IE8+ and allow us to mimic the behaviour of tables with css. It’s not a replacement for tables but just allows css layout to mimic certain table behaviours such as equal columns. If you don’t need equal columns then the floated version would be just as good and work in older IE which is what the conditional comments are doing for ie7 and under.
Have we reached the stage where display:table is the preferred method of creating a columned layout or are floated divs still the way to go? I was wondering where the state of the art is today. I am creating a new personal site and I intend to support IE8 and up. display:table seems much less hassle than floats and supporting IE7 seems pretty simple as Paul shows. One day we will turn the corner and get away from floated columns and their limitations such as unequal column height. But are we there yet?
We need as many options as possible, as there will never be ‘one method that fits all needs’. One problem with CSS-table layouts is that there is far less flexibility in page structure, which can be a big turn-off. At this point, I’d never consider CSS tables for a whole page layout, It’s much more useful for small sections of a page.
As Ralph said it does depend on the job in hand but I find I am using display:table a lot more for those awkward equal column scenarios. It’s also useful when you need to space blocks apart without the usual column drop when you resize the window. However that can be a drawback as cells never wrap and eventually won’t compress anymore but floats will wrap to a new line and allow the element more space.
Of course you could use media queries and change the layout to floated for smaller screen sizes and get the best of both worlds.
You have to be careful with display:table in that heights become a minimum and that min-height and max-height are undefined in the specs for table elements.
