Pressure is nothing more than the shadow of great opportunity. - Michael Johnson

Equal Height Columns using CSS

7 years, 11 months ago

Creating equal height columns with tables is easy. Of course we shouldn't use tables for layout. With CSS it's a little harder. If, for example, you create a three column layout by floating 3 DIVs within an overall container the result will probably look something like the following:

View Example

All's well and good except those pesky columns aren't the same height. It's tricky but we can fix this a number of ways without resorting to tables.

"Faux Columns"

The most commonly described method, "Faux Columns", works by applying a background image to an overall container. As the container will stretch to the height of the largest contained column, assuming a suitable clearing method is used, a vertically repeated background image representing the colour of each column will "fake" the effect of equal height columns.

View Example

JavaScript Solutions

Other solutions use JavaScript to adjust the height of the columns. I'm not keen on this approach.

Another Way

The third and final way which this post investigates uses pure CSS and doesn't require any background images, at least initially.

Taking the original example shown, we add a large bottom padding value to force the background of the shorter columns beyond the height of the longest column of content. The size of this padding is totally arbitrary. We just need to make sure it's enough to take account of the difference in content between columns. This gives us the following:

View Example

Next we trick the browser into thinking the columns are still only as high as the content they contain by applying an equal sized but negative bottom margin. Finally we add a rule to the container to hide the overflow created by the padding value. The result, 3 equal height columns.

View Example

But what if we want to add borders to the columns? Unfortunately, things become slightly more complicated. We start by adding some spacing between the columns. A right margin handles this nicely. Next we add a border rule to each column. This ought to be enough but unfortunately the oversized padding we added previously pushes the bottom border out of view.

View Example

To solve this we need to "fake" the bottom border using a background image applied to the main container and positioned bottom, centre. We'll also need to float the container or specify a width to force it to shrink wrap the columns and therefore ensure correct positioning of the background image. Internet Explorer only works if we also float the inner container.

We won't see the background if we apply it and the overflow hiding rule to the same container so we'll have to create an inner container and move the overflow rule to that. Finally we need to add a 1 pixel (or value corresponding to the border width required) bottom padding to the outer container to provide space for the background image to show through. We have now achieved equal height columns with borders applied.

View Example

Finally we can make the columns elastic by specifying the column widths in ems rather than pixels. To keep this example simple I've only included two columns.

View Example

Notes:

  • I've tested the various examples described above in Firefox 1.5, Safari 2, Opera 9 and Internet Explorer 6.
  • The third technique described here was, I think, first written about on Position is Everything in an article entitled One True Layout. I'd highly recommend checking it out also.
  • Thanks to Andrew Phillipo, a Yahoo! colleague, for suggesting the use of a background image to solve the bottom border problem.

Comments

  • Great roundup, thanks!

    Michał Stempień - 1st October 2006 #

  • so, instead of using faux coloumns, which works great, i should use some crazy css to get equal height columns?

    david - 1st October 2006 #

  • @david - "Faux Columns" could be problematic if your columns need to be elastic or youn want to create a set of equal height boxes with borders. You also save an HTTP request with this method. That said, I'm just presenting the options - obviously it makes sense to use whichever method you feel most comfortable with.

    Ed Eliot - 1st October 2006 #

  • I'm using Debian Sarge which still comes with Firefox 1.04 (with security fixes) and the third column's content appears below the first two as one paragraph as large as the browser window.

    Robin - 1st October 2006 #

  • Very helpful, Thanks

    New Website Builder - 1st October 2006 #

  • Chris Williams did something similar a few months ago which also allowed for fluid column widths - but the CSS might be a little crazy!

    http://www.chrisjwilliams.co.uk/article/Towering-Thrash-Box-Inferno

    Edited to link URLs.

    Marcus Pearson - 2nd October 2006 #

  • Amazing article! I didn't need it yet, but I'm sure that I'll...

    Carlos Eduardo de Souza - 2nd October 2006 #

  • Very smart, bravo.

    I'd say this method is an alternative to faux columns, but doesn't replace it.

    Ned Baldessin - 2nd October 2006 #

  • Or you could just use a simple table. I agree that CSS is great and should be used as much as possible, but not in scenarios where it's use is a great disadvantage. Isn't one of the philosophies of good web design avoiding bloat? I could write a convoluted code that relies on abuses and glitches to get CSS colums to work or I could keep it simple.

    I use a design priority. Use CSS first, then Tables, then CSS:absolute positioning, then javascript, then flash if appropriate.

    Don't handicap yourself to get things working in CSS. Do what works best and most efficiently. That's web design philosophy.

    TME - 2nd October 2006 #

  • This is a simple re-hashing of the Equal Height Columns portion of "In search of the One True Layout" on Position is Everything:

    http://www.positioniseverything.net/.../print

    There are several issues that you need to be aware of when using this technique which are documented here:

    http://www.positioniseverything.net/.../equalheightproblems

    Edited to link URLs.

    Mark Reeder - 2nd October 2006 #

  • ...or you could apply display: table; for your containing div and then add display: table-cell; on your column divs. it works in newer browsers. it's easy and it's dynamic; alter the contents of your columns realtime and the columns will still be balanced.

    only real minus (besides bad backward compatibility) is margins for columns will be ignored (much like margin on td elements).

    rasmus - 2nd October 2006 #

  • nicely done - thanks.

    David - 2nd October 2006 #

  • That is very nice.

    Jason Krew - 2nd October 2006 #

  • A "simple re-hashing" of "In search of the One True Layout" on Position is Everything, or a simplified version? I'd say the latter, and what a great article this blog post is because of that.

    Nicely written and very helpful. What I like about this article is that it gives me just enough information but doesn't overwhelm with technical details that are initially quite tricky to grasp.

    The perfect lead-in to the Position is Everything article.

    Thanks a lot, Ed. I've just subscribed to your feed :-)

    Ian - 5th October 2006 #

  • Firstly, the comments link on your main page takes me to the form to add a new comment, but I would like to read the existing comments first. I have to scroll up.

    Secondly, interesting article. I've been battling with columns and CSS recently, and come to realise that there is a serious problem with using floats. As your examples show, when the browser window is narrowed, the columns drop down, ruining any design. (In one of your demos, the background colour of the right column even changes from light grey to dark!) Whereas if a table were used, the columns would always stay together. And it would be easy to colour the cells and have them all the same height. Is there a way to get round this dropped floats problem? Alas we can't use display:table as IE6 and 7 don't support it. All this CSS and hacks is way too complex for something that should be very simple.

    Chris Hester - 9th October 2006 #

  • Chris - I take your point about the comment link. I'll get this fixed.

    The columns only drop down in these simple examples because I haven't specified a width for the container. If you enter a width you'll find this no longer happens.

    Re the colours changing, I haven't seen this myself but I'll look into it and see if I can replicate.

    Ed Eliot - 9th October 2006 #

  • Ian - I do agree that this is a simplified version that is a little easier to digest and does have some value in that respect. However, I also think that proper citing of sources is critical, especially for something that's so heavily based on an existing technique.

    Besides the lack of attribution, one of the other problems with not citing this source is that there *are* some gotchas (especially the anchors problem) that are well documented in the original but not even mentioned here.

    If this article had been subtitled "Simplified Equal Height Method from In search of the One True Layout" with a proper link (or even if there had been a mention and a link in a footer), I wouldn't have had any issue.

    Regardless, I think there's some good information here and have added the site feed to my feed reader.

    Mark Reeder - 9th October 2006 #

  • Mark - I wasn't actually aware of the One True Layout article on Position is Everything before posting this article. I certainly don't suggest anywhere that I came up with the idea. I'm simply interested in providing simple explanations of how to use useful techniques and in that respect I hope it's been helpful.

    That said, I agree that linking to the article on Position is Everything provides useful extra info and so I've now done so in the notes section of my original post.

    Ed Eliot - 9th October 2006 #

  • Hello

    Nice info on the Equal Height Columns, I have been experimenting with the Mark Challoner way for some time now Full Demo with free standing borders Sorry not for IE, move over, click on body, wrapper

    Full Demo Sorry not for IE, move over, klick on body , wrapper

    Ben - 12th October 2006 #

  • Hi!

    Unless I see an example with CSS, that has 3 columns, each one containing text (!), each one containing a custum background image (with y-repeat!), and each one of same hight (irrespective of the amount of content, in any of the 3 columns) {and working correctly in all modern browsers} I shall continue to use TABLES.

    As far as I know, only tables can do it. PLEASE show me otherwise.

    (For me: tables are the forgotten holy grail)

    anonymous - 16th October 2006 #

  • Here's a solution to the problem the anonymous reader was trying to solve.

    Equal Height Columns with Custom Background Images

    Switching from tables to CSS layout is about separating the layers. (HTML for describing content, CSS for presentational display, JavaScript for behaviour). Most importantly it's about a return to using HTML in the way it was originally intended to be used - for describing the semantics of your content and therefore making it more accessible to all.

    Ed Eliot - 19th October 2006 #

  • Actually, the claim that tables shouldn't be used for layout is groundless. They are perfectly acceptable, as long as standard Web practices are observed. I agree, if so-called CSS-based layout approaches don't work, use what does work, as long no rules are broken. Besides, because tables can be styled with CSS, they can rightly be considered part of "CSS layout" despite what the "experts" might claim. After all, how is using a series of nested s styled (in order) "display:table," "display:table-row," and "display:table-cell" (all of which, I believe are necessary for proper display in Safari, and none of which is supported in IE6/7) than using , , and ? Until IE better supports CSS, table will be needed, unless you are willing to compromise your designs to avoid them.

    Lawrence Bansbach - 5th November 2006 #

  • Oops, I should have remembered that that content within angled brackets doesn't display, so "how is using a series of nested s styled (in order) 'display:table,' 'display:table-row,' and 'display:table-cell' (all of which, I believe are necessary for proper display in Safari, and none of which is supported in IE6/7) than using , , and ?" should read "how is using a series of <div>s styled (in order) 'display:table,' 'display:table-row,' and 'display:table-cell' (all of which, I believe are necessary for proper display in Safari, and none of which is supported in IE6/7) simpler than using <table>, <tr>, and <td>?"

    Lawrence Bansbach - 5th November 2006 #

  • Lawrence - Tables are designed for displaying tabular data only and semantically they only make sense in this context. If you use them for layout then you're adding confusion to the meaning to the content in the page.

    <div>s on the other hand don't have any inherent semantic meaning. They're simply containers for other elements.

    Styling <div>s with display:table, display:table-row and display:table-cell doesn't alter the semantics, only the presentation. I'm am curious though as to what situations you feel you would need to use these display properties in Safari.

    Ed Eliot - 6th November 2006 #

  • i have table with 2 columns and 10 rows 4 div each one having 5 to 10 pharagrahs.. and i'm displaying each div using onclick with CSS ,

    wat want is how to auto adjust the row height according to the each div height ...now i'm giving row height manually it is assign to all the div . i want the solution for this can you help me in this

    Randesh - 9th November 2006 #

  • I was using this method for quite a while until IE7 came out. It collapses all the column down, a real pain in ass. I use the JS solution when I have to, but overall I try to design w/o equal height columns. You can also use a real fat border with negative margin.

    Tim Wright - 20th November 2006 #

  • I agree with several of the above posters re: tables. At this point the support for CSS in current browsers isn't consistent.

    What is "it" all about? Making web pages that everyone can see as intended, or using CSS *entirely* so that we can say we did. What happens to all that broken CSS when browsers get updated and change how they deal with the mistakes? There's a reason they're called "hacks."

    I think too many people are stuck in the "css or die" mentality, leading them to write web code that is just as bad as the table-ridden pages they bitch about.

    And yes, I am fully aware of the benefits of DIVs over tables re: rendering and other specifics.

    Elijah - 8th December 2006 #

  • Nice post! Very helpfull solution.

    Renato Carvalho - 14th December 2006 #

  • hi! just stumbled across your post on google.. Thank you so much! I have been trying to do something similar for months!

    jk-pc - 6th January 2007 #

  • Any suggestions for making this work under IE7?

    David J Rust - 8th January 2007 #

  • Hello, there, Ed!

    Just after making my brief post about making this work in IE7, I found a solution and thought I'd share it, here.

    I did, indeed, have both of my equal-height columns set with the negative margin-bottom and positive padding-bottom (3000px, in my case) as well as making the enclosing div equal to a height of 100% (as well as both the HTML and BODY elements). The site worked fine under FireFox and IE6 (and less).

    There was, however, a surrounding div between BODY and the content div.

    What I needed to do was apply the 100% height to that div as well PLUS add the margin-bottom and padding-bottom lines. To target IE7, then, I used conditional comments:

    I hope you find this helps!

    David J Rust - 8th January 2007 #

  • This should have appeared in my previous post; stupid me, I forgot it was a comment...

    <!--[if IE 7]> <style type="text/css" media="all"> #roxio_framework { height:100%; margin-bottom:-3000px; padding-bottom:3000px; } </style> <![endif]-->

    David J Rust - 8th January 2007 #

  • David - thanks for taking the time to post your findings.

    Ed Eliot - 9th January 2007 #

  • This technique you're using with padding and negative margins reminds a lot of how I solved a certain issue in the project I'm currently working on. When I found that solution I also found a accessibility/usability issue involved in using this technique - which hasn't been mentioned?

    The user can not interact with the stuff below the equal height columns. This means they can't select the text, click on links, etc.

    There is a easy way of solving this though, just add a z-index to the content below the equal hight columns.

    Teddy Zetterlund - 25th January 2007 #

  • Very clever, thank you.

    Del - 27th February 2007 #

  • Hi. I did find this article very well written and I do find it amazing what people come up with to make CSS do what it doesn't normally. However, for this latter reason I, too, have joined the side that says "why CSS at all cost?". The primary argument for using CSS for layout rather than HTML is to stay true to what they are meant to do. But if CSS is incapable (or not as capable) of achieving some things, then does that really mean it should be bent, twisted and poked with hot iron to give us the impression that it is capable? Isn't that what we did with HTML, but without the sleepless nights? I haven't used tables for layout for quite some time now... but man, there have been times!!! I will continue to use CSS only, because I do know it is the way forward and when it works it's SWEET! However, I do spend a lot of time searching for the neatest (and hopefully future-proof) solution for the trickier tasks I encounter.

    Istvan - 5th March 2007 #

  • Any chance you could try incorporating the fix for IE7 into your last example. I have not hand any luck so far.

    Brett - 19th March 2007 #

  • Brett - I'll take a look.

    Ed Eliot - 20th March 2007 #

  • content1

    content2

    #c1, #c2{float:left;width:300px;}
    #c1{border-right:1px solid #ccc}
    #c2{border-left:1px solid #ccc}
    #c2{margin-left:-1px}
    

    and this

    ilya shvets - 20th March 2007 #

  • Hi Guys,

    very good tutorial about equal height problems in CSS! BUT there is still one thing you can not do with this 'hack'. I am going to write my page partly in TABLES, because of this probeblem. Maybe someone knows a way? THE PROBLEM: 3 colloms next to each other with a background-image wich is positioned in the bottom of the three colloms. This is not possible, because it wil dissapair?

    Ciao

    Vin - 25th March 2007 #

  • I forgot to say something in my comment above.

    I read about designers who were designing things differently because of the lacks css. If CSS is restricting design creativity, why should we use it? I was happy with tables, because i could make anything what came up in to my design programm. With al these CSS hacks it is not clear at all. And ofcourse, my comment above show the one of the lacks where I am talking about.

    Anyone who has the 'restricions' with designing?

    Vin - 25th March 2007 #

  • The overflow:hidden does not work in Netscape! Is there a solution for this?

    Carole de Block - 26th March 2007 #

  • Ciao - I'd actually argue that more complex designs are possible using CSS based layout than with tables. Just because one can come up with a design in Photoshop doesn't make it suitable or appropriate for the web. I think a large number of the problems people face comes down to trying to bend print designs to fit the web. By doing so one is completely misunderstanding the medium.

    Carole - Which version of Netscape are you having problems in?

    Ed Eliot - 26th March 2007 #

  • Carole is correct. The overflow:hidden does not work Netscape since it began using Firefox code up through version 8 since they were built on the Firefox 1.0 code base. Thus, it won't work on Firefox 1.0 either. It will work on starting with Firefox 1.5, but Netscape didn't change from the 1.0 engine until the recently released Netscape 9, which is based on the Firefox 2.0 engine.

    There may be a way to work around the problem however. I learned about the problem after removing a javascript slide show from the page. With the slide show in there, it works fine, even in Netscape. With it removed, and my CSS buttons still in place, when I hit refresh it doesn't work, but when I click a button or resize the page, overflow:hidden immediately works. That is not true of a simple example where it never works. I have zoom:1 set to fix and IE refresh problem, but that does not fix this problem. I still do't have a concrete answer for the early Firefox code base. If anyone else does, I'd appreciate hearing about it.

    Jack Toering - 22nd June 2007 #

  • Does this work in IE7?

    Jen - 30th June 2007 #

  • Jen - yes works fine in IE 7.

    Ed Eliot - 2nd July 2007 #

  • Jack, I don't think anyone has an answer for the early Firefox code base :). It's almost like watching people who don't understand binary when they laugh at 1101001 and try to act like they actually understand the joke. I can see the point to everything here but honestly, and nobody shoot me please...CSS and I...well, we just don't mix and there's nothing anyone can do to change that. Even with simple codes and stuff. You know what I mean? I prefer layers and switching layers to tables and tables to layers. I feel it's a more basic and understandable approach. And even though it can cause some problems, I feel that I'm good enough at what I do to keep at least 90% of those problems from occurring. Doesn't anyone agree with me? I mean seriously. What’s the point of putting yourself through CSS if you really don’t have to?

    Chainsaw - 13th July 2007 #

  • Great post: You just saved my day! :)

    Christian Stangier - 8th August 2007 #

  • Great post! As a teacher I gave this as an exercise to my students after our lesson in CSS. Do you also have something related to making collapsible cells for tables using CSS?

    art oil paintings - 12th August 2007 #

  • #3 worked like a charm, thanks for the tip.

    Aaron

    Aaron Fay - 16th August 2007 #

  • Man, I cannot thank you enough. With the countless designs of mine this has been the main problem and now it's solved!

    This is a great solution, thanks again!

    Callum Jefferies - 24th August 2007 #

  • Good info - I had to have the overflow 'visible' in my main container 'div' and using your negative margin '-1000px'with the padding '1000px' in my left and right colum 'div' worked just like i need it to ...

    /*MY CSS ----------ITALA-----------------*/

    div.maincontainer /* This is the main container that holds the head section, the right & left col and footer */ { width:750px; height:100%; margin:0px 0px 0px 0px; background-color:#FFFFFF; margin:0px 0px 0px 0px; text-align:Left; overflow:visible; }

    div.head /* This is the header with an image as a background graphic*/ { width:750px; height:100px; background-color:#ED8000; color:#FFFFFF; background-image:url('images\weekly-preview-hdr2.jpg'); background-repeat: no-repeat; }

    div.r-col-container /* This is right col container */ { float:right; width:440px; height:auto; background-color:#FFFFFF; padding:0px; font-size:15px; margin:0px 0px 0px -300px; margin-bottom: -1000px; padding-bottom: 1000px; }

    div.l-col-container /* This is left col container */ { float:left; width:300px; height:auto; border-right: 1px solid #CDCDCD; background-color:#EFEFEF; padding:0px; font-size:15px; margin-bottom: -1000px; padding-bottom: 1000px; }

    div.footer /* This is the footer */ { width:750px; height:75px; background-color:#CDCDCD; color:#000000; border-top:solid #DCDCDC; border-bottom:double #DCDCDC; font-size:11px; }

    Thanks for your help

    Itala - 29th August 2007 #

  • Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.

    Sohbet - 7th October 2007 #

  • Check out 2 equal height columns layout generator using columns swapping technique: http://2columns.net

    Pawel - 7th October 2007 #

  • Ed Eliot,

    I am a newbie in webdesign and html, after reading your tutorial on this post, it did make me understand more on how to create a nice css layout. I like most is "Equal Height Columns with Custom Background Images", which i can include a background image on my design. Thanks!

    Pawel,

    Your layout generator is cool, at least for me, it let me create two column with ease.

    Meteko - 23rd October 2007 #

  • Thanks for stuff.I was looking at the material over a large amount of time

    Wild - 23rd October 2007 #

  • Thanks! Saved me hours of effort!

    Murts - 31st December 2007 #

  • Very good. Will be very handy on my next project!

    Sydney - 11th January 2008 #

  • Great tutorial for newbie like me, it is easy for a starter like me to understand and read! Keep up the great work and thanks for it.

    James Burt - 24th January 2008 #

  • Hi Ed, I've managed to get equal height columns in a different, simple way and it uses no CSS hacks. Here are three examples:

    3 column liquid layout in pixels

    3 column liquid layout in ems

    3 column liquid layout in percent

    Matthew James Taylor - 27th January 2008 #

  • Good article Edward! I'm a rookie - your site let me learn more. Thanks! Przewozy Autokarowe

    Przewozy Autokarowe - 7th February 2008 #

  • I read about designers who were designing things differently because of the lacks css.

    If CSS is restricting design creativity, why should we use it? I was happy with tables, because i could make anything what came up in to my design programm. With al these CSS hacks it is not clear at all. And ofcourse, my comment above show the one of the lacks where I am talking about.

    proxy site - 21st February 2008 #

  • life-saver! very thorough explanation...and doesnt leave much out!

    Juhi - 21st February 2008 #

  • When I took up a short course on web design, CSS was the very basic lesson I learned. But when it comes to practical web design, we were told: 1. If possible, avoid using tables when designing a web site 2. Never use CSS in creating tables. But my question was – What about if you’re left with no choice but to use tables and your client requires the use of CSS?

    Thanks for sharing this information to us? This is truly helpful. You really made it easy for us.

    art gifts - 10th March 2008 #

  • not very useful

    if the right colum have a lot of information to show (so a big height) the left column will not have the same height.

    You did not solve the probleme at all...

    Valentin - 10th March 2008 #

  • What i love about this post.... quote "Creating equal height columns with tables is easy. Of course we shouldn't use tables for layout."

    So there is a perfectly easy way of doing something but we shouldnt use it.... That's so typical of this industry...i've been in IT over 15 years now... Having just created a full blown flash site to avoid having to mess with this rubbish i know found out the google wont index it...great. The likes of the W3C and google would like you to create all your sites like them or wikipedia...of course you wont sell much that way. Perhaps we should all go back to green screens???

    One thing i do know for certain... i wish i'd become a brick layer.

    Sorry for the rant...know its not constructive.

    Poxy Server - 11th March 2008 #

  • ps....view the source on this site www.gamercize.net

    it's nothing to do with me but its stuffed with tables and displays ok.

    But i'm sure someone will have an opinion on how it breaks some standard or something

    Poxy Server - 11th March 2008 #

  • Any chance you could try incorporating the fix for IE7 into your last example. I have not hand any luck so far.

    Aukcje - 28th March 2008 #

  • Thanks for very interesting article.

    cilt hastalıkları - 6th April 2008 #

  • I see a lot of comments from posters that do not understand why we try to avoid using tables for lay-out. The explanations given are too abstract I think, so here's my try to an answer.

    As I see it, a dynamic website consists of 4 different elements: 1) Server-side code (that generates HTML) 2) HTML (usually generated by server-side code) 3) CSS (usually static files) 4) Javascript (usually static files)

    The problem with using a table for lay-out is that in order to change the design, people would have to change the code (templates) on the webserver to change the generated HTML. There exist many different systems for generating HTML, such as PHP, Pearl, Python, ASP, JSP, CGI etc etc.

    Designers don't know all these systems. But they all know CSS (the good ones :-)). If we could generate such HTML that it's structure would never have to change just to change the design, we could just point designers to a demo website and say to them: "Make this site look like the new design by editing this CSS file". Designers can work on their local system with a few pages they saved to their machine and when they would be done we'd just swap the old CSS with their version and presto, done!

    The designers and system administrators wouldn't even need us programmers to change the design. They can do it themselves. That's almost impossible with table based design.

    Just have a look at http://www.csszengarden.com/ for a demonstration of what can be achieved. The site has hundreds of different designs that can be cycled through live, and the HTML stays the same, except for a stylesheet include.

    Last but not least, with stylesheets you can serve different user agents different design by supplying multiple stylesheets and giving them a media attribute: media="print", media="screen,tv" etc. But when the main design is in tables, this totally messes things up because tables are difficult to style from CSS making it hard to do things like having the header, footer and navigation disappear from the print version of the page.

    This column-height thing is just a short-term problem with CSS that will be fixed in the coming years (it's fixed in IE8 for example) and that's what the CSS design guys promoting table-less designs are aiming for. If you want to build a specific website and don't care about print, tv or mobiles, by all means use tables. But some of us are working on CMS software that generates HTML and we are interested in outputting HTML now that will work (with all modern devices and features) for years to come. Forward-compatibility is what we are looking for.

    OddesE - 8th April 2008 #

  • Thanks very Much!!!

    Ale - 15th April 2008 #

  • Yes, avoid tables if you can. Sometimes, you just can't. I find it absolutely amazing there's no easy way to stretch a column in CSS. Who's coming up with these specs? Broken and useless.

    Something like "height: parent;" So it will stretch to fit the container element. It could be so easy - this is a complete FAIL.

    Andrew Hallock - 16th April 2008 #

  • I am still using tables for my 3-column layouts and after reading this article, I am going to stick with tables! What's the point of using CSS if I still need to do all these contortions? The designers of CSS were somewhat short-sghted, I must say.

    NKK - 13th May 2008 #

  • Thanks much, I had used the bottom padding and -ve margin technique, for the bottom border instead of using the image I used a 1px height div with exactly the same size, margin and paddings of the above columns

    Rajamohan - 16th May 2008 #

  • As some of us have demonstrated, its perfectly doable to create equal-height columns.

    Both when working with float based layouts, and position based.

    No reason to stick with tables, its hard to understand how some webdesigners, still get away with using tables.

    BlueBoden - 29th May 2008 #

  • I'm ecstatic that CSS is helping standardize browser behavior (buy why is it taking so long for onmouseenter and onmouseleave?) and I love centralized control of style. After weeks of trying to replace tables with CSS however, I've decided the idea is ridiculous.

    Most of my web apps present *lots* of structured data in limited screen space and a table handles this best: 1) CSS makes it easy to completely change the way a page looks (see Zenworks), but an institution'ss forms rarely change for the simple joy of aesthetics so this CSS benefit is virtually moot here; 2) CSS seems to favor artistic purposes - I easily can add a sidebar in the middle of my inspection report - rather than logical organiztion (where a table excels); 3) CSS works reasonably well with three columns but I typically use four to six columns (label with instructions and hover-help, data with hover-help, label with..., data with..., etc.) - the CSS for this is a nightmare; 4) It appears to me that rowspan (at least) cannot easily be handled without using divs to group certain divs - in other words, defining structure within the HTML (which is what CSS tries to avoid); 5) The "cells" in a pseudo-table created with CSS are independent whereas a table acts as a flexible but coordinated whole - if one element expands, the rest of the table (including rowspans and colspans) automatically adjusts to maintain a consistent presentation - again, more and more CSS; 6) The idea of having to cancel an element's float attribute with an altogether different element seems (to this object-oriented programmer) poor design, and again embeds a degree of structure within the HTML.

    I've wondered about display:table-row and display:table-cell; perhaps these are the answers I need. While shoving hidden images into cells, using negative margins (i.e. negative distance), and all of the other contortions I've seen suggested may eventually make a well-behaved, non-fragile tabular presentation, my question is why write something so bizarre?. And for other who may have to maintain my code later, I should saddle them with triple (or more) the amount of code (CSS) to sift through to accomplish something I could have done simply?

    No, CSS has to pay more attention to unartitisc, straightforward rank-and-file presentation before HTML tables can be relegated to spreadsheet-only applications.

    Eric - 1st July 2008 #

  • Apologies for the three(?) misspellings.

    Eric - 1st July 2008 #

  • The argument against using tables is really simple, and has already been mentioned.

    Using tables for layout produces non-semantic markup.

    HTML describes your content, and so should be as correct and as rich as possible.

    In theory, you should first mark up your content correctly, according to your content structure, etc, before you begin to consider implementing the positioning, layout, colours, font sizes, etc. with CSS.

    Sure, you'll have to go back into your HTML or template and wrap a few things in the odd 'div', but by-and-large, you should be able to reach your desired outcome without resorting to using tables for layout.

    Dan - 18th July 2008 #

  • I implemented the third way on my blog, www.olmmod.com (actually I used a template found here, and then customized it to fit my page). I should also admit here that I am just learning CSS.

    The problem only appears in IE6; the three columns extend about 50 pixels down past the footer. I put a background image in the footer to make it appear like the bottoms of the column were bordered and had a margin, but this obviously does not work for IE6.

    Can anyone help me to troubleshoot the fixing of this? Would be much appreciated.

    Krib - 7th August 2008 #

  • Sorry, my link did not go through. The original template I customized is at:

    http://betabloggerfordummies.blogspot.com/2008/03/equal-height-columns-template-for.html

    Krib - 7th August 2008 #

  • Hi Ed,

    Your post [Equal Height Columns using CSS]solved my problem. As I'm new to Div-based/table-less Layout Designs.

    Nice Blog is yours Ed Eliot, very helpful indeed. Thanks!

    Salman Ahmad - 8th August 2008 #

  • Why exactly shouldn't we use tables for layout if they work so well?

    After wasting hours trying to get "floating" gives to look the same in both IE and Firefox, I gave up and went with a table.

    Voila! A multi-column design that looks EXACTLY they way I wanted it to look.

    Half Sigma - 10th August 2008 #

  • Thanks, it is very useful information. my website is http://www.kadel.com.np and i use this idea in http://www.tibetexpedition.com

    Narayan - 15th August 2008 #

  • Hi..I have always wondered how to do this with CSS. Great post. Really appreciate it. Thanks. Will be using it on my sites frm now on.

    oneamongu - 15th September 2008 #

  • great trick!!! this is totally what i needed!! thanks!!

    gpunx - 20th September 2008 #

  • Nice fix, but I've noticed one (pretty serious) issue. When using this with jumplinks (e.g. ), the page gets cut off above the anchor.

    Nick - 3rd October 2008 #

  • [FIXED COMMENT]

    Nice fix, but I've noticed one (pretty serious) issue. When using this with jumplinks (e.g. <a href="#top">), the page gets cut off above the anchor.

    Nick - 3rd October 2008 #

  • Thanks so much!!! Solved everything!!!

    Nate - 8th October 2008 #

  • How is

    div long-classname div another-long-classname div a-spurious-classname div meaningless-classname [etc.] accompanied by pages of CSS, with logically ridiculous massive paddings and negative margins and floats and clears any more semantic, any more maintainable, or in any way better than:

    table tr td?

    It's not.

    At least with the 'old-school' method, you can tell a row from a cell (nested divs are meaningless). And things will just work without hours of debugging, conditional includes, and hacks.

    CSS is great, I love it, but it's useless for layout. Float, display, margin, and padding are not sufficient. It needs true grid structuring and at the very least the fundamental basics of sizing and alignment (width:parent, height:parent, align-vertical:center, align-horizontal:center, etc.) before it will be useful for layout.

    CSS was not designed for layout and in its current incarnation using it that way is just a nasty hack that to me is worse than nested tables. It adds markup, adds illegitimate styling code, and is very fragile, adding a lot of debugging and workaround time.

    It's a grand idea, but still far from practical reality, IMO. I'll be overjoyed when CSS does properly support layout; it'll save me a lot of work. But until then, trying to use it for that is just a hack which takes a lot more work.

    Ra - 8th October 2008 #

  • Very helpful, thank you very much. IMO, much better than "faux column".

    DynV - 16th October 2008 #

  • I've just written an article that explains a pure CSS equal height columns method and it is not subject to the page anchor problem that plagues the 'large bottom padding' approach. I hope you find it useful.

    Matthew James Taylor - 24th October 2008 #

  • Sorry, here is the url: Pure CSS Equal Height Columns

    Matthew James Taylor - 24th October 2008 #

  • Thanks for that post ... I wish I found it last night before struggling for an hour with this problem.

    theshwam - 1st November 2008 #

  • @Nate: I'm amazed that bordering 2009 you're still advocating table layouts. I wonder what kind of websites you produce where tables are more efficient than clean HTML + CSS.

    It's as simple as this:

    1. Tables are adequate for tabular data. A whole page's content is not tabular data.

    2. Want to change the position of your footer, move your sidebar without having to rewrite everything? Forget it with tables.

    It seems you haven't really grasped the concept of CSS + XHTML. The web is now made of hierarchical data, not unordered stuff created only to follow a certain layout. With tables, most Javascript apps of today would be impossible to design. Also, exact designs are gone, the days the web was thought to look like printed folders is way past. I suggest you take an interested look at how any major site is built today, or even this blog.

    Ricardo - 11th November 2008 #

  • Great post, thanks!

    I had some issues using this when nesting my container inside another div. Using position:relative on the div containing my columns was able to resolve it.

    Cheers and thanks again!

    L

    LJ - 13th November 2008 #

  • Great post, thanks!

    I had some issues using this when nesting my container inside another div.

    In IE7, overflow:hidden was not working.

    I was able to resolve it using position:relative on the div containing my columns.

    Cheers and thanks again!

    L

    LJ - 13th November 2008 #

  • CSS has caught some major flak here ... and I get sufficiently frustrated to join the 'to-hell-with-it' crowd and use tables when things get too complex. But I read something on a similar site recently that really got me thinking ...

    Use CSS as intended and if the browser breaks so be it ( for browser read IE ).

    If we'd all get on that bandwagon, IE would retire or sort itself out and our lives would improve a hundredfold! (Of course we could all go bankrupt in the meantime)

    ... now to get hold of IE7 and see what other hacks I need to fit into my screeds of CSS ...

    Ray - 15th November 2008 #

  • I surf with images turned off. :-)

    Cachito - 17th November 2008 #

  • I have to agree with the people who are cheering for tables. I have been tasked with rewriting our company website because it's rather dated, and I have now spent more time trying to hack the layout to look the way I want it to, than I have spent on the content it will contain. There is something seriously wrong with anyone who thinks that this level of hackery is acceptable.

    I still cannot get the method described above working, and I know it's because of some obscure rule of placement or precedence, and the weeks I have spent on this has cost my company thousands of dollars.

    Ray - it's a noble idea to just use CSS and say to hell with the browsers that require hacks, but that's not practical and it doesn't solve the original issue which is CSS doesn't yet HAVE a solution for making columns the same length.

    CSS is nice in many respects, but sadly, if all you want to accomplish is a BASIC layout - CSS is complete fail.

    Terrain - 25th November 2008 #

  • Thank you so much!

    This options help me alot.

    only overflow:hidden and margin-bottom and padding-bottom is necessary to simulate full height.

    Great work.

    Thiago - 7th December 2008 #

  • Thank you so much!

    These options help me alot.

    only overflow:hidden and margin-bottom and padding-bottom is necessary to simulate full height.

    Great work.

    Thiago - 7th December 2008 #

  • So if you use the overflow:hidden hack how do you continue to use anchors effectively? I have two pages where the anchors cut off the top of the page. Does anyone know how to fix this?

    Heather - 12th December 2008 #

  • I have had an issue with this. I am using a two column layout using the margin-bottom/padding-bottom along with overflow hidden. It works to perfection, but I ran into a issue recently. If you try to add a anchor tag in the page it totally screws everything up. Anyone have a solution to this? I have been all over the net the last 3 hours looking for one. No success!

    Thanks in advance!

    Bo - 23rd March 2009 #

  • Ed, great stuff. I was searching all over to find a solution to have my right column expand to the full page width in a two-column layout. This did the trick. This comment was exactly what I was looking for. The people who say to just move onto table layouts are the ones who don't take the time to properly learn CSS. I have a ways to go, but it's worth putting in the effort to do things right, especially if you want to skin blogs where you don't control everything. Now I just need to understand why this CSS does what it does. Back to the books...

    zombieCat - 23rd March 2009 #

  • Ed, great stuff. I was searching all over to find a solution to have my right column expand to the full page width in a two-column layout. This did the trick. [a href="http://www.ejeliot.com/blog/61#comment-613"]This comment[/a] was exactly what I was looking for. The people who say to just move onto table layouts are the ones who don't take the time to properly learn CSS. I have a ways to go, but it's worth putting in the effort to do things right, especially if you want to skin blogs where you don't control everything. Now I just need to understand why this CSS does what it does. Back to the books...

    zombieCat - 23rd March 2009 #

  • I think I actually read this post quite a long time ago, but tonight I tried it for the first time, and so far so good! I've tried different methods in the past, but I like the flexibility of this. Even if I don't end up using it myself, it's nice and straightforward.

    I actually have a blog myself with CSS tips and tricks. Would it be okay if I link to this article? This method may have its issues, but it's certainly worth a look. Thanks, and nice work!

    Kate - 24th March 2009 #

  • Awesome, works like a charm! Thanks a bunch!

    Paul - 26th March 2009 #

  • You save me hours! that problem was driving me crazy.

    BIG THANKS

    Erica - 5th April 2009 #

  • Great article! I have been casually experimenting with equal height columns using CSS and never got it figured out. Recently, I had an actual need for equal height columns and I ended up going with the bottom padding approach and so far it's working perfectly well! Of course, I have TONS more browser testing to do but so far, it's looking promising. :)

    With regard to using HTML tables for page layout, one of the problems I frequently see with doing that is the perceived "need" to nest tables in cells to get the desired behavior. Using tables for an equal height column layout might be *easier* but does that necessarily make it *better*? I don't have the answer to that but I tend to lean toward the answer being no.

    @Kimberly, if you knew me would you kiss me too? :D

    Peace...

    Tomdkat - 11th April 2009 #

  • I found that you need to add an position:relative to the column wrapper to make this work in IE7 and IE8. I do not really see why, but it took some time to get this fixed.

    I almost reverted to fauxcolumns/JavaScript, but I needed a column to be able to disappear in my template (Joomla) in some circumstances.

    Jeroen Zomer - 12th April 2009 #

  • hi, thanks for the great article, as a designer I tested the margin-bottom: -2000px; padding-bottom: 2000px; works perfectly with the overflow hidden for the container, at first thought it won't work but it worked! amazing!!

    Thank you a lot as I have been trying to come with equal columns for the last 2 hours.

    omc design - 14th April 2009 #

  • Some of these comments just make me laugh. Clearly there are too many people out there with time to waste. If you would like to waste days if not weeks of your life, by all means use one of the css/div approaches, but if you want your website done today, use the best tool for the job, tables. The argument that you can change design on a whim blah blah blah is bollox anyway, because I can guarantee that you will waste more time debugging your 5000 lines of css than its worth. If your primary concern whilst creating websites is symantics you are in the wrong business, perfect websites just wont exist until all browsers conform. So best of luck with that.

    Q - 14th July 2009 #

  • Wow, I'm astonished that there are still folks out there that haven't adopted HTML+CSS. It strikes me as akin to traveling to a remote Pacific island and discovering Axis soldiers that think WWII is still on.

    Naturally, there's a learning curve to CSS -- there is for everything that we have to learn. But CSS has been around for 10 years, and the browser support is outstanding overall. Most design issues (read: IE6) can be worked out with just a few lines of code.

    If you're not able to get your design to work using XHTML and CSS, then you just need to learn more about the method to make it work.

    Mike - 12th August 2009 #

  • Ugh, just use tables. This is all well and good for an experiment or something, but if you're in business, you need a solution in 5mins, not in 2 weeks.

    Lets face it, CSS for columns is only possible if the columns are simple. If it's anything even remotely complex, really you need tables.

    I'll stick to tables for this type of thing. It's just easier.

    aussiedude - 22nd August 2009 #

  • What if i layout whole website using Div tags but use a two column table inside a Div tag to give it a two column look. Do you think it will effect the speed too much?

    Umair Cheema - 23rd February 2010 #

  • The Another Way method is a godsend. It covers exactly the use case I need it to cover, and your rationale for why it's done that way is very clear.

    Thank you so much! I was honestly worried about having to fall back to icky tables back there.

    Alyssa - 23rd February 2010 #

  • In my search to resolve the issue of equal height div columns, many solutions are proposed and some are a bit crazier than others. Ed Eliot's way of doing it not only is dead simple, it actually works !! Its implementation flawlessly passed the test in all contemporary browsers: IE 7 and 8, Firefox, Opera, Chrome, Safari.

    Many thanks to you, Ed, for sharing this method with us !

    Cordially,

    Patrick

    Patrick D. - 25th February 2010 #

  • Great Walk-Through!

    Essentially how I got it to work was to apply the css to the sidebar that I wanted to make equal in size to my content. I borrowed the code from OneTrue Layout which basically reads in my layout:

    #menu-left { padding-bottom: 32768px; margin-bottom: -32768px; }

    And it's perfect! Thanks a bunch. I was thinking I would have to manually change the sidebar height for each subpage.

    XEN1TH - 22nd March 2010 #

  • This works great, but it fails when you have anchor tags linking to certain paragraphs in the page - any fix for that?

    Whodeee - 23rd March 2010 #

  • I am so pissed off with all the BS explanations and trickery! CSS is a load of crap! Why some of these nut jobs hate it so much is beyond me... it works perfectly and is soo simple! Still there is No way to get 2 divs side by side... none! I have tried 5 different ways and none work... all break the container.

    You so called experts can all go to H!!!!!!!!!

    Pete - 13th April 2010 #

  • Thank you soooooo much! Your trick (with the padding 2000 and margin -2000) is the only one that worked for me (and believe me I've been looking for hours for a solution).

    Vered - 17th April 2010 #

  • Crazy hack, but it works perfectly for me!

    Thank you!

    Atea - 27th April 2010 #

  • That's a very nice and simple technique. Thanks for publishing it. Combined with the Layout Gala series, I've got some very nice layout options.

    Andrew - 4th May 2010 #

  • Awesome help! Linked to you in my blog post: CSS Equal Height Columns

    webeno - 16th May 2010 #

  • Hi,

    Article on Equal Height Columns using CSS is good and it would be a best tool for fresh candidate.

    Deep from Website Development Company : http://www.e-profitbooster.com Our Services : • Website Designing • Web Development • PHP Development • ASP.NET Development • E-Commerce Website • Website Re-designing and Maintenance • Banner Designing • E-Learning • Domain Services and Maintenance

    e-profitbooster.com - 30th June 2010 #

  • margin:-1000px; ??? what happend if the height of column is 2000px? i guess is a awful solution.

    vasco - 24th July 2010 #

  • Niceeee!!! I was using jquery to make equal heights.

    damu - 12th August 2010 #

  • 'Of course, we shouldn't use tables for layout'. You need read no further.

    Mack - 18th August 2010 #

  • thanks, i use Faux Columns to solve my problem.

    blogspot user - 2nd September 2010 #

  • Works very well! Nice result, but sucks on IE 6... I'm doing a website which must display correctly on IE 6 for en enterprise, and your third solution (CSS padding and negative margin). It seems to work on first sight, but the content of my page is dynamically loaded and then the content is 2000px bottomer!

    Geoffroy - 1st October 2010 #

  • Thanks Ed. The beauty of a blog with great content. Four years on and this just got me past a sticking point. Lot's more for me to learn about CSS and thanks to your examples... perhaps I know a little more now.

    Cheers, Paul

    Paul Eaton - 10th October 2010 #

  • Awesome - concisely solved the problem without any crazy hacks or tricks. Thanks!

    David - 16th October 2010 #

  • Research results from seemingly unrelated domains are converging on an aspect of human behavior that will be of critical interest to cognitive neuroscientists in the next century: the intimate interaction of brain, language, and environment

    güncel blog film izle güncel haber bloğu online video the intimate interaction of brain, language, and environment konserler sarki sözü

    bios1 - 19th October 2010 #

  • "another way": great workaround...thanks a lot!

    chabar - 22nd November 2010 #

  • Thanks for valuable Post.. It solves my Problem..

    Aswanth - 23rd November 2010 #

  • Great tutorial! This is exactly what I needed. Thanks!

    Mat - 3rd February 2011 #

  • Appreciated! Just what I've needed!

    Petr Pacas - 3rd February 2011 #

  • One of the comments above mentioned that the columns wrap underneath each other if there is not enough room (window is resized). Eliot's solution was:

    "specified a width for the container... this no longer happens."

    This only works with absolute widths. Percentages, necessary for liquid columns, work too since they'll shrink to 1px widths if needed.

    However, if you want liquid cols and one or more columns to have a min-width, then the ones to the right will always drop. No horizontal scroll like you would get with fixed width.

    How is fixed min-width different from fixed width? And what can be done to stop this "div-wrap"?

    Heis - 18th February 2011 #

  • i tried using the "Faux Columns", by applying a background image, and it works on all browsers except internet explorer 6, in which the content of the container a slightly moved upwards. can anyone indicate how i can solve this problem?

    Thank You and much appreciated for your help..

    Mario - 12th March 2011 #

  • There are too many comments to read through, but I found what I think may be a better solution to the border problem with the last solution detail in this article (shown in the last example).

    Using a background image to set the bottom border is messy; try resizing the window so that the columns are forced underneath each other, see what I mean?

    I would suggest this: first set the position style attribute for the #inner div to "relative". Then before the content in each column insert a div element to be the first element within each column div and set its style attributes as the following (assuming its class is "bottom_border"):

    .bottom_border{
       position:absolute;
       bottom:0px;
       width: (column width)px;
       height: 1px;
       border-bottom: (same border style as column);
    };

    This works for me every time. Although to make the example work you will have to give the column divs a class name and style them with that (rather than just style each div under the #inner element). This way will also work if you had a varying number of columns, ie all floated left.

    I hope that makes sense, and thank you again to the author for a great solution for me to work with.

    I have uploaded the example from this site with my changes here:

    http://www.webanimal.co.uk/examples/equalheightcolumns.htm

    Take a look and let me know what you think :) BTW I haven't tested it in IE6 so let me know how that pans out :S

    HumanTriangle - 30th March 2011 #

  • Thanks so much for your help. Still learning CSS and now I can do columns.

    Keep up the good work.

    Mark - 1st May 2011 #

  • Hello,

    I must say that this article solved a problem for me that caused a lot of headache. It works fine for me, but I did the following alterations:

    Bottom border: since borders are displayed a little bit different on the different browserts when using css3 formatting (shadow, rounded corners), the background image was not an option. So I placed another div below the outside container just underneath with a height of about the size I need to make the rounded corners visible (depends on the radius, but will be something around 10-20px). Next I placed two (or three) divs inside with exactly the same settings and a negative margin-top to cut off the top border (including top rounded corners).

    Finally I would like to add my opinion to the table vs. layer discussion. I did not read ALL of the posts. But using tables for columned layout is highly deprecated for a bunch of reasons. It will make things easier at the first glance, but it breaks the rules for accessibility by breaking up the logic behind the pagecontent. This logic is very important if you use screenreaders or display the page in text based browsers and tables are treated differently.

    Using the display:... settings doesn't make things really better. Hacks have to be used for different browsers and I prefer solutions that work without hacks. Hopefully we all will be able to use columns in CSS3 soon ...

    Christoph - 25th May 2011 #

  • Wow, exactly the info I needed. Amazing that after 4+ years, it's still pertinent and effective!! Thanks!

    Dami - 26th May 2011 #

  • This works for me every time. Although to make the example work you will have to give the column divs a class name and style them with that (rather than just style each div under the #inner element). This way will also work if you had a varying number of columns, ie all floated left.

    I hope that makes sense, and thank you again to the author for a great solution for me to work with.

    I have uploaded the example from this site with my changes here:

    herbalife - 1st June 2011 #

  • herbalife nedir

    herbalife - 1st June 2011 #

  • herbalife nedir

    herbalife - 1st June 2011 #

  • herbalife nedir

    herbalife - 1st June 2011 #

  • herbalife ürünleri

    HERBALİFE NEDİR - 1st June 2011 #

  • herbalife

    HERBALİFE ÜRÜNLERİ - 1st June 2011 #

  • herbalife yorum

    HERBALİFE ÜRÜNLERİ - 1st June 2011 #

  • herbalife sipariş

    HERBALİFE ÜRÜNLERİ - 1st June 2011 #

  • herbalife urunleri satış

    HERBALİFE ÜRÜNLERİ - 1st June 2011 #

  • herbalife kulanalar

    HERBALİFE - 1st June 2011 #

  • herbalife ürünleri

    HERBALİFE NEDİR - 1st June 2011 #

  • herbalife

    HERBALİFE NEDİR - 1st June 2011 #

  • dogalkilo kontrolu

    HERBALİFE NEDİR - 1st June 2011 #

  • herbalife

    herbalife iş paketi - 1st June 2011 #

  • selefon ürünleri

    selefon - 18th June 2011 #

  • Kilolara Çözüm

    Herbalife Ürünleri - 18th June 2011 #

  • Plywood ürünleri

    Plywood - 18th June 2011 #

  • Yazılım ve donanım ürünleri

    Yazılım ve Donanım - 18th June 2011 #

  • Musa Kaplan

    Musa Kaplan - 18th June 2011 #

  • I think this kind of kludgery is a powerful argument in favor of using tables for your layouts. Tables can do it directly. CSS requires some fragile and bizzare techniques to trick the browser into doing the right thing.

    Mark S - 22nd June 2011 #

  • Thanks man. This is one of those issues when you think I should know how to do this, then you start to doubt yourself.

    Thanks again great post, super useful.

    Richard Dale - 23rd June 2011 #

  • BTW Musa Kaplan don't talk sh*t.

    Richard Dale - 23rd June 2011 #

  • Thanks again great post, super useful.

    pozitif bilgi işlem - 25th June 2011 #

  • Wow thank you so much, I had this problem at school and my teacher didn't know about this either. Been searching all over google until I found this, SAVED MY LIFE!

    Jo - 11th July 2011 #

  • Thank you! Ur my hero Sir Eliot :)

    Lucas - 19th July 2011 #

  • WOW. Thanks! That REALLY helped me out, I was about to say "I can't do that with CSS", but we all know -- there's always a workaround ;)

    Stephanie - 5th August 2011 #

  • Wow, nice tip! Thank you! :)

    Nicholas Camp - 23rd August 2011 #

  • My site now looks a bit nicer and the approach #3 works in my smartphone's browser as wel.l Thanks.

    SeekerOfThePath - 30th August 2011 #

  • Thanks! It´s a great solution for me, it works great.

    MAU - 31st August 2011 #

  • Excellent article, thanks a lot!

    Tomas Lieberkind - 20th September 2011 #

  • Great, been looking for a purely css way of doing this. Very nice solution.

    Thank you.

    Darrell - 22nd September 2011 #

  • It is a wonderful article, I also want to share a very easy js method to achieve better results. http://www.testly.com/easy-approach-equal-height-columns/

    Khubab - 24th September 2011 #

  • LOL, all this nonsense instead of: , and job done. CSS is the biggest slap in the face of UI developers in the history of computing. If you can't achieve 'equal columns' in a simple, straightforward and logical way, without HACKS, then this is a lost case. You could do all of the above 20 years back with a one liner, Jesus Christ, CSS fanbois.

    maraka - 8th October 2011 #

  • In the above post a table tag was stripped out, so I wrote something like: TABLE, TR, TD, TD, TR, TD, TD, and JOB DONE!

    maraka - 8th October 2011 #

  • fdasfsdfsdfs

    dfdsf - 18th October 2011 #

  • OR %s

    Hello - 18th October 2011 #

  • It is a wonderful website.

    Musharif Khan - 19th October 2011 #

  • In the above post a table tag was stripped out, so I wrote something like: TABLE, TR, TD, TD, TR, TD, TD, and JOB DONE!

    herbalife - 25th October 2011 #

  • thanks for ur blog

    Deepthi - 9th November 2011 #

  • CSS is lame for layout presentation and a horrible time sink to try and get it to do anything interesting. I definitely understand why people cling to tables. Myself I am going to try and keep presentation sooo simple that even css can hack it (pun intended). But if i get lumbered with a project that wants anything fancy for presentation/layout .. I guess I will just have to use tables just to avoid bizzaro, convoluted css hacks that break when something changes..

    Dan - 18th November 2011 #

  • Thank you so much. You win the war vs. tables. You, and auto margins.

    Will - 25th January 2012 #

  • Amazing, Solved my issue on one go Thanks :)

    Shashaank - 25th January 2012 #

  • great :) ... but what if I want to insert an element for example a button aligned to bottom right corner? if i try to set button position:absolute; and bottom:3px;right:0px

    button is invisible

    any solution for that?

    thanks

    nomak - 1st February 2012 #

  • Great read, but what if your content is to expand past the original viewport height? the overflow:hidden cuts off the page in older versions of IE for sure, did not try other browsers, but would expect simliar behavior

    jeff - 9th March 2012 #

  • Very useful - have applied it to 2 columns on our site's front page. Thanks!

    Paul - 13th March 2012 #

  • thanks..!

    web tasarım - 21st April 2012 #

  • Uhm..."of course, we shouldn't use tables for layout", but if you have to resort to all kinds of css faux column tricks or extra javascript just to get your columns the equal height, wouldn't that be an argument for actually using tables for the basic layout??

    JoeBoggs - 24th June 2012 #

  • av malzemeleri

    av malzemeleri - 25th June 2012 #

  • Thanks! The "other way" presented here was a lifesaver!

    boaz - 9th September 2012 #

  • Liked the method. Unfortunately, I can't use it, as my middle column has a negative margin, so applying 'overflow: hidden' crops part of the content.

    Mathias Aeschlimann - 9th October 2012 #

  • thanks..!

    kozmetik - 13th October 2012 #

  • thnnks

    korhan - 28th November 2012 #

  • Thanks.I also like to use CSS styles in designing web sites instead of tables.

    herbalife - 9th January 2013 #

  • Seo Hocasi

    VNOkyanus - 18th April 2013 #

  • Seo

    Seo - 25th April 2013 #

  • Seo ve Adwords

    Seo ve Adwords - 26th April 2013 #

  • You win the war vs. tables. You, and auto margins.

    Özgür AKSOY - 26th April 2013 #

  • thanks for ur blog

    Dokuma Halı - 28th April 2013 #

  • thank u for share good write

    dedektör - 21st May 2013 #

  • klasik koltuk takımı mobilya masko

    klasik koltuk takımı - 30th May 2013 #

  • Have one question. This may be stupid, but what is a rule.

    Auzzay - 13th July 2013 #

  • çok güzel.

    herbalife ürünleri - 3rd August 2013 #

  • I think the problem here is if you have content with id in any of the child divs. That's the problem I have with my site layout. My left div has the content and the right div has the side panel and a background color. I have added margin-bottom:-1000px;padding-bottom:1000px to the child divs, and overflow:hidden to the parent div. However I have content inside child divs with id's so I can reference to that exact position from another page. Example div id="map". The page looks fine when the url is http://www.mysite.com/page.html but the content gets pushed up (not visible anymore) when the url is http://www.mysite.com/page.html#map

    Mike - 3rd May 2014 #

  • Herbalife bitkisel kilo kontrol ürünleri

    Herbalife - Bitkisel Kilo Kontrol - 26th July 2014 #

  • Thank you very very much! You are great!

    Milan - 7th August 2014 #

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index