a weblog by Ed Eliot

Select Theme: //

Web Standards, PHP, HTML, CSS, JavaScript and other related technologies

Selected Entry

6 months, 7 days agoEqual Height Columns using CSS

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.
  • Back to index
  • Bookmark It

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!

    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:

    www.positioniseverything.net/.../print

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

    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 { %; 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;px;}
#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

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. The audio CAPTCHA quality is not yet of as high a standard as I'd like it to be. If you're having problems with both the visual and audio CAPTCHA please accept my apologies and consider sending your comment to me at me@ejeliot.com. I'll ensure it's added promptly to the relevant blog post.

Back to index

Related searches:
height october display layout bottom
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.