How to make multiple div columns expand to the height of the tallest/highest column - 7 solutions
I've tried to include a comprehenisve list of all solutions to this common problem. It is one of those web design problems that every web designer runs into eventually. You have two or more columns that have auto height (so it expands to the content) but you want to have both columns take the height of the tallest one.
You may become frustrated and just go for a fixed height on both columns - but this isn't really a solution.
There are basically 7 work-arounds for this problem which I will briefly note and reference other sites that show the solution in more depth.
1. The Faux Columns method
This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image. www.alistapart.com/articles/fauxcolumns/
2. The Overflow Crop method
This method uses overflow:hidden CSS and a super large padding-bottom and margin-bottom to draw the container all the way down inside a parent div element. This works in some browsers, but not in all so it's not a 100% solution.www.positioniseverything.net/articles/onetruelayout/equalheight
3. Separating the Content from the Background method
This method uses a cool idea, the columns with the content are different from the background of those columns (sort of a faux columns without images). It is a bit more complicated to understand and code (more divs and styles) but it doesn't rely on JavaScript and uses good CSS. matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
4. The CSS display:table method
This is a pure CSS solution and uses display:table CSS. It works great, but not in IE7 or IE6 which is still a problem as there are a whole heap of IE users still out there. www.gunlaug.no/contents/wd_additions_22.html
5. The Borders with Negative Margins method
This is a more complicated method and is tricky to get your head around, and if you want vertical borders between the columns it won't work with IE6 and IE7. www.smashingmagazine.com/2010/11/08/
6. The JavaScript method
This is a great solution assuming JavaScript is enabled on the target web browser. Very flexible but for a similar and simpler solution check out the next method. www.impressivewebs.com/equal-height-columns-with-javascript-full-version/
7. The jQuery method
This is very similar to the above JavaScript method, except Ewen Elder has developed a jQuery plugin that you can use. Great demo and download. www.jainaewen.com/files/javascript/jquery/equal-height-columns/
You may become frustrated and just go for a fixed height on both columns - but this isn't really a solution.
There are basically 7 work-arounds for this problem which I will briefly note and reference other sites that show the solution in more depth.
1. The Faux Columns method
This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image. www.alistapart.com/articles/fauxcolumns/
This method uses overflow:hidden CSS and a super large padding-bottom and margin-bottom to draw the container all the way down inside a parent div element. This works in some browsers, but not in all so it's not a 100% solution.www.positioniseverything.net/articles/onetruelayout/equalheight
This method uses a cool idea, the columns with the content are different from the background of those columns (sort of a faux columns without images). It is a bit more complicated to understand and code (more divs and styles) but it doesn't rely on JavaScript and uses good CSS. matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This is a pure CSS solution and uses display:table CSS. It works great, but not in IE7 or IE6 which is still a problem as there are a whole heap of IE users still out there. www.gunlaug.no/contents/wd_additions_22.html
This is a more complicated method and is tricky to get your head around, and if you want vertical borders between the columns it won't work with IE6 and IE7. www.smashingmagazine.com/2010/11/08/
This is a great solution assuming JavaScript is enabled on the target web browser. Very flexible but for a similar and simpler solution check out the next method. www.impressivewebs.com/equal-height-columns-with-javascript-full-version/
7. The jQuery method
This is very similar to the above JavaScript method, except Ewen Elder has developed a jQuery plugin that you can use. Great demo and download. www.jainaewen.com/files/javascript/jquery/equal-height-columns/
Comments
Post a Comment