Hi. Could you please tell me what would be good code that I can use on my websites that ensures that all columns keep equal lengths athe bottom so that one column doesn’t stay short while others are long because of items entered in these columns.
Thanks. Paul
This link could be a great help to your query http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Hi,
You can also use some javascript code to get the maximum height of the columns, then to set the same height to the other column.
An example and JS code is in this tutorial Make HTML elements the same height.
Thank you to all who repied.
Thank you to all who replied. I like James Taylor site and tutorials so well done Pestcontrol101. MarPlo thank you too as the site your recommended has some good tutorials as well. Much appreciated.
My pleasure Paul. It’s good to know that I’ve helped you somehow.
Hi,
I see you have already had some good suggestions and each method has its advantages and drawbacks.
The negative margin approach is a a good method but add some complexity to the site not to mention extra elements. It can be awkward to tweak the design once completed because you have to adjust everything else to suit so maintenance can be awkward. However it does work well when implemented properly.
If you have a fixed width site (or fixed width column) then the “faux column” approach is an easy solution then seldom needs extra markup as it often lends itself to the existing structure. The drawbacks are that you have to make an image each time you want a colour change.
If IE8+ support only is required then you can use the display:table properties for your equal columns and in most cases will need no extra markup.
A technique I often use for full length columns is to use an absolute overlay and was recently discussed in this thread.
Great to hear that…It’s good that you have actually undertaken all such details.
Thanks Paul. Would this work for a three column site? Like, first column for navigation, centre column for contents and right column for other info or adverts? Thanks for your help sofar. Appreciated. Paul
Hi,
You could use display:table for IE8+ and then feed ie7 some other rules with a runtime expression and then you won’t need any extra markup.
Here’s an example:
http://www.pmob.co.uk/temp/3col-fluid-round3.htm
In a fluid layout IE7 and under may round dimensions awkwardly at times.
Here are some other examples without using the expression.
http://www.pmob.co.uk/temp/3col-absolute-columns-fluid-fixed.htm
http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm
www.pmob.co.uk/temp/casino.htm
http://www.pmob.co.uk/temp/equal-columns-3fluid.htm
http://www.pmob.co.uk/temp/equal-columns-3fluid-centred.htm
http://www.pmob.co.uk/temp/equal-columns-absolute-dec2010.htm
Of course the easiest approach would be to give equal columns to ie8+ (using display:table) and just let ie7 and under have content height columns.