Four Methods to Create Equal Height Columns

Four Methods to Create Equal Height Columns


Back when tables were used for layouts, creating equal height columns was very simple. All you had to do was create three cells in a row and you have a layout with equal height columns. The method for creating equal height columns isn’t as straightforward when you use CSS for layouts.

This article discusses some methods to create equal height columns that work on all major web browsers (including the infamous IE6). All of these methods show how to create a three column layout.

Create a layout in which all the three columns assume the height of the tallest column.

Equal Heights: Before/After

Method 1: Using display: table Attribute

In this method we use a list or one div enclosing a set of <div>s (one for each column). The enclosing div is given a display: table attribute and each enclosed div is given a display: table-cell attribute.

I’ll discuss this with an example:

Here’s the markup for this technique

Here’s the CSS

Advantage:

It is very simple and easy to implement. It is far simpler than most other methods. This can save you a LOT of headache and time.

A margin (the equivalent of a cellspacing in table layouts) cannot be applied to each cell. This can be overcome by using a border of white color (or your background color) of a suitable width to mimic a cell spacing.

Disadvantage:

This method doesn’t work on IE7 and below. It may be a long time (when IE7 becomes the new IE6 or IE5) before we can safely use this technique. But it is useful when you can be certain IE7 will not be used by your audience such as in corporate Intranets.

See this method in action

Method 2: Using JavaScript

This method relies on JavaScript to set the height attribute of all the columns in the layout to the height of the tallest column. In this example, I have used jQuery to equalize the columns.

Create the HTML for the three columns:

Put them next to each other and aligns them in center them.

JavaScript (using jQuery):

You can put the JavaScript in a separate file and attach it to your HTML or use it inline but make sure you also attach jquery to the HTML page and this script is called after jquery is attached.
The code you need to change is the css class of the div elements that make the columns. In this example it is:

You may replace the above with the css class that describes all the <div> elements of the columns. For example: you may add a class to each of the three columns and use that instead for simplicity.

Advantage:

Advantage of this method is that there is no CSS involved in making the columns get equal heights. It also works in every major browser

Disadvantage:

If JavaScript is disabled, the columns will not be of equal height. This shouldn’t bother you because many essential websites today need JavaScript function therefore very few users will have JavaScript disabled. Even if it is disabled, the site will not become unusable.

See this method in action

Method 3: Faux Columns

This method is the earliest known solution to the equal columns problem. This method involves the use of a background image that has one region for each column’s background color. The columns are positioned just above the background color regions that belong to them. After the markup of all three columns is a <div> element which takes a clear: both attribute making the container background stretch to the tallest columnThe background is repeated vertically so it appears like the three columns are of equal height.

The HTML:

The CSS:

Advantage:

It is simple, doesn’t need much CSS and can be easily implemented.

Disadvantage:

You cannot use fluid width equal height columns if you have more than two columns as we are using an image.

See this method in action

Method 4: Using Separate Background Color <div> elements

In this method we use a separate <div> element for the background of each column. Any div element takes the height of the largest element it encloses. This method works based on that principle.

The HTML:

The CSS:

Looks complicated doesn’t it? Once you understand how it works it becomes very simple. The technique is summed up in the following 5 points:

  1. .rightback, .contentback, and .leftback are the enclosing <div> elements .leftsidebar, .content and .rightsidebar are the <div> elements that have the content.
  2. Each enclosing <div> corresponds to the background (colour and/or image) of a region. In this example .leftback for .leftsidebar, .contentback for .content and .rightback for .rightsidebar
  3. Except the outermost one (corresponding to the right most column) all the enclosing <div> elements are given a right offset equal to the width of the element to the right of the element to which it provides background colour. In this example .contentback (provides background colour for .content) is moved left by 300px (which is the width of .rightsidebar). (See image below)
  4. The .left sidebar, .content and .rightsidebar are floated left and given some width.
  5. They are given a left offset equal to the sum of widths of all the columns except the left most one. Here it is = width of rightsidebar (300px) and content (400px) = 700px.( B+G)

The image below shows how the enclosing <div> elements,  .rightback, .contentback and .leftback, are displaced. The bottom most is the .rigthback element and the top most being the .leftback element.

The dashed lines represent the viewable content as the .rightback element crops the other backgrounds using an overflow: hidden attribute.

In the following image, the black lines below the red line are the content <div> elements .leftsidebar, .content and .rightsidebar as they will appear if they are given float:left and given appropriate widths to fill the entire width.

All the three content elements are given a left offset of C using relative positioning.
C = B+G (see image above)

This method is discussed in much detail in this article.

Advantage:

It works in every browser including Internet Explorer 6. This method doesn’t need JavaScript and is accomplished purely through CSS and HTML.

Disadvantage:

It is not as straightforward as the other methods. It is a little tricky to understand. But it is can be easily created for any number of columns once you understand how to do it.

See this method in action (3 columns) | Same technique used to create four column layout

Final Note

Each method has its advantage and disadvantage but you are most likely to find the last method to work in every browser if you are looking for the purest CSS solution to the equal height columns problem.

Interested in writing a guest post for us like Raja? We’d love to have you! Here’s how to get started.

Posted Thursday, July 9th, 2009 · Back to Top

SPONSOR

Add Comment

81 Comments 95 Mentions

  1. Clive Walker Author Editor

    For smaller page areas, it could be worth considering the CSS3 multi-column layout module. Not supported in all browsers yet, I know – but I think there is a JavaScript method that overcomes the browser support limitation.

    ·

  2. Clive Walker Author Editor

    Forgot to say, I’m writing a blog post on the multi-column method. If you are interested, will post it here when done.

    ·

  3. Internetlösungen Author Editor

    Thanks for this great tutorial. It helped me alot to proofe my CSS Skills.

    ·

  4. Rajasekharan Author Editor

    Internetosungen, Glad to know you liked it.
    .-= Rajasekharan´s last blog ..Drupal Module: Twitter Block – Add Your Twitter Feed To Your Drupal Website =-.

    ·

  5. Mike Author Editor

    Method 1. The list items should be wrapped in ul tags, and the demo links are all mixed up.

    ·

  6. Florian Author Editor

    What about a giant padding-bottom and giant negative margin-bottom with overflow:hidden container? It’s the easiest way in my opinion. Seen here: http://www.positioniseverything.net/articles/onetruelayout/equalheight

    ·

  7. Zach Dunn Author Editor

    @Mike

    Thanks for the tip off, I’ve updated the post to reflect the changes.

    ·

  8. Michele Author Editor

    This is what I use: http://www.alistapart.com/articles/holygrail

    ·

  9. Web Design Mumbai Author Editor

    Nice post. Creating a layout does give a lot of problems in CSS.

    ·

  10. David Hucklesby Author Editor

    @Michele – that’s the same as in Florian’s article, I believe.
    Another method is “Companion Columns” -
    http://www.satzansatz.de/cssd/companions.html

    ·

  11. Nick Author Editor

    Another method:
    http://chikuyonok.ru/playground/cols/ – example
    http://www.vtb24.ru/ – work site

    ·

  12. Artisan Author Editor

    I love the final method. Thank you for these tricks!

    ·

  13. DHX Author Editor

    *starts a forcefield around around himself*
    Or you could just use TABLE for it :)

    ·

  14. Marc Author Editor

    Just what I was looking for a half an hour ago.. I was going crazy!

    @DHX

    First of all> hahahahaha Nice one brotha
    Second>Luckily I can use TABLES every day on my work. For Styling an email for our clients:D

    ·

  15. Zach Dunn Author Editor

    @DHX

    You’re absolutely right. We could call it “Method 5: How to lose the respect of your web peers”

    ·

  16. Dicky Author Editor

    Great tutorial! I am now using the jQuery method. Simple and easy.
    .-= Dicky´s last blog ..80 Smart And Creative Advertisements That You Should Bookmark And Stumble =-.

    ·

  17. Dimitris Author Editor

    (Editors Note: Demetris is not the audience you (or anyone) should be developing for. Take what he says as a grain of salt. One of these four methods should suit almost any design. )

    Method 1: Ok but not supported by the most popular browser. FAIL

    Method 2: Requires javascript and jquery. FAIL

    Method 3: Hard coded into an image! EPIC FAIL

    Method 4: What ever happened to “semantic markup”? FAIL

    HolyGrail: I pity thou who have gone into such painfull lengths. However I pity more those who have hired you. Had I been your boss, you would be fired for throwing unnecessary complextity into a simple problem, solely to suttisfy your tableless ego.

    ·

  18. Raja Sekharan Author Editor

    @Dimitris

    All the more reasons why you are not (or ever will be) my (or anyone’s) boss. Apparently Tableless-less-ness will be more semantic right?
    .-= Raja Sekharan´s last blog ..How To Add A Administration Page In WordPress =-.

    ·

  19. Dimitris Author Editor

    Guess which one looks both better AND more correct semanticaly given the context of this blog post.

    …Lots Of Content…
    …Lots Of Content…
    …Lots Of Content…

    …Lots Of Content…
    …Lots Of Content…
    …Lots Of Content…

    Certainly you wouldn’t get a job from me. My associates are rated in terms of their productivity and efficiency.

    ·

    • Zach Dunn Author Editor

      @Dimitris

      I don’t know what prompted you to write such negative comments, but we don’t run that kind of ship here. I can’t tell if you’re a table advocate or else, but it’s irrelevant. The web niche doesn’t need your “pity”, although is seems like it could benefit from some tact in keeping your mouth shut.

      ·

  20. zalun Author Editor

    Thanks for the summary.
    You have a bug in the last example’s CSS. rightright is not valid CSS parameter.
    .-= zalun´s last blog ..New/old passion =-.

    ·

  21. Louis Author Editor

    Nice variety of methods here. I wrote a pure JavaScript method as well, which works well cross-browser, and also takes into consideration any border-thickness and padding: Equal Height Columns with JavaScript.
    .-= Louis´s last blog ..Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript =-.

    ·

  22. Dimitris Author Editor

    I see, you (author) edited MY comment and put a retarded remark downplaying my opinion because you didn’t like it. I hadn’t realized I was talking to such a wuss!

    ·

    • Zach Dunn Author Editor

      @Dimitris

      That was actually my doing, and not Raja’s.

      See here’s the thing Dimitris: we’re entirely fine with having different opinions, but your comments go a step beyond that. There’s no reason to berate the author with a comment that has zero insight as to possible alternatives. You’re entitled to your opinion, but don’t tell someone who’s worked hard on an article that you pity a person who would follow his advice. That’s called being a dick… and we don’t like that here.

      ·

  23. Jeremy Author Editor

    Nice summary here of all the methods! I put in place the “faux columns” method. Worked great… but I had to align horizontally buttons at the bottom of each column. And with the “faux columns” method, the columns look the same height but are not. So I guess I’ll go for the jQuery option here.
    .-= Jeremy´s last blog ..Drag and drop en HTML 5 =-.

    ·

  24. Jeremy Author Editor

    I’m using multiple lines with 3 columns each. For example, I have 3 lines and 3 columns ( = 9 boxes in total). With the JS, ALL the boxes have the same height. So if the last box of the last line has plenty of text, the boxes on the 1st line will be far too big.

    So I want to implement the JS method for EACH line. I tried to do it with this code but it doesn’t work :
    function setEqualHeight(container,columns)
    {
    container.each(
    function()
    {
    var tallestcolumn = 0;
    columns.each(
    function()
    {
    currentHeight = $(this).height();
    if(currentHeight > tallestcolumn)
    {
    tallestcolumn = currentHeight;
    }
    }
    )
    columns.height(tallestcolumn);
    }
    )
    }
    $(document).ready(function() {
    setEqualHeight($(“.mosa-list”),$(“.mosa-box”));
    });

    Maybe you’ll see what I’m doing wrong here. Anyway, thanks for any help.
    .-= Jeremy´s last blog ..Drag and drop en HTML 5 =-.

    ·

  25. sravkum Author Editor

    wow this is really a good stuff – useful
    .-= sravkum´s last blog ..Rakhi ka Swayamwar.. marriage with a difference? =-.

    ·

  26. bang Author Editor

    wouldnt “minimum height” be easier ?
    ok this way it will depend of the content, but i found it way easier and lame browsers friendly.
    and its just 1 css line to add.

    ·

  27. bang Author Editor

    min-height *

    ·

  28. Raja Sekharan Author Editor

    @bang, I assume you mean adding a min-height attribute to all three (or more) columns. Suppose there are three columns A, B and C. If column A has much content and needs more vertical space than the min-height value, it will not automatically resize columns B and C to the height of A. Columns B and C will still be at the height specified by the min-height attribute. But it might work when you are sure the content will never overflow past the min-height.
    .-= Raja Sekharan´s last blog ..How To Add A Administration Page In WordPress =-.

    ·

  29. bang Author Editor

    yep, exactly what i meant.
    but of course it all depend ur content.

    ·

    • Laneta Author Editor

      This piece was a lifeajcekt that saved me from drowning.

      ·

  30. Bradford Sherrill Author Editor

    Nice post, JS + CSS is the way to go for cross-browser compatibility

    ·

  31. webzhao Author Editor

    { height:100%;_height:99999px; }
    I think that’s the most simple solution

    ·

  32. David Author Editor

    OK. This is a tangent but is related. I have a table as follows:

    Label_Header|Column1|Column2||Column3|Column4
    Row_Label_1|R1_Data1|R1_Data2||R1_Data3|R1_Data4
    Row_Label_2|R2_Data1|R2_Data2||R2_Data3|R2_Data4

    This is actually constructed with an outer table with 1 row. In the first column of this table is an inner table containing “Label_Header|Column1|Column2″ and the corresponding data. The second column of the outer table contains an inner table contain “Column3|Column4″ and the corresponding table. (You can see the html for this here: http://drop.io/jip2adu/asset/mriweb-dll-htm).

    How do I make the rows of each table the same height?
    (Please note that due to the way this file is generated, I must use the table structure as it appears)

    Any help is greatly appreciated!

    David

    ·

  33. john Author Editor

    The columns are not aligned properly on IE8, IE6 and FF 3.5 browsers. What about if the browser disable or doesn’t have JavaScript, then this technique is flawed. Layouts like this shouldn’t rely on JavaScript.

    ·

  34. Michelle Klann Author Editor

    I am definitely going to bookmark this article!

    I think I would opt for method 3. Even though it may be more cumbersome and time consuming – it seems to be the best solution for all browsers and browser settings. Thanks for taking the time to put this together! I’ve been trying to overcome this exact issue for some time now.

    ·

  35. Enrique Ramírez Author Editor

    Besides number 1, these all seem to be about faking equal height columns than to actually making them. The downside of this is that, for complex layouts (or layouts with complex backgrounds) most of these won’t work.

    There are two more methods that you didn’t mention:

    1) First one works on very specific designs. As long as the parent element has a set height, setting the children’s height will work as expected. An example would be having a #parent with height: 600px; then the two columns can have a height: 100% and it’ll work.

    Of course, we don’t want fixed heights anywhere most of the time. Then again, we can use the html and body tags for this. Setting body, html {height: 100%} will do wonders. Explaining further would be kinda hard, but here’s an example: http://blog.enrique-ramirez.com/wp-content/uploads/2007/08/css-columns-100-porciento.html (sorry, it’s in spanish).

    2) The second one is fairly more complex (actually, LOTS more). I’ll try my best to explain: #parent has 2 children: #one and #two. CSS would be something like this:

    #parent {overflow: hidden}
    #one, #two {padding-top: 32768px; margin-top: -32768px}

    That’s it. Basically, we’re giving a HUGE padding-top to the columns, making thems tretch pretty much everything we’ll need, and then using a margin-top to bring back the content. As to why we need to use 32768? Well, IE seems to like numbers not greater than that. Anything beyond that number IE won’t understand. Here’s an example: http://blog.enrique-ramirez.com/wp-content/uploads/2007/08/css-columns-padding-revised.html

    Great article, just needs some more options. :)

    ·

  36. Darren Author Editor

    @Enrique, I don’t see method #4 as ‘faking’ equal height columns at all. They are genuinely three columns of equal height with no hacks or javascript. You can see another explanation of the same technique here:

    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

    ·

  37. suffering Author Editor

    There is a good way for this:
    http://www.456bereastreet.com/lab/equal_height/

    ·

    • 奥巴马 Author Editor

      ie 6/7 don’t support table-cell

      ·

  38. Randall Author Editor

    I’ve been trying to find a solution for fixed width sidebars and variable width centre content (obviously with equal height background colour on all three columns). Can anyone suggest or provide a link to a solution?
    I’ve seen method 4 explained elsewhere but I believe the sidebar width will vary when the browser is resized.
    I’m a novice when it comes to CSS so apologies if I’ve missed something fundamental.
    Nicely written article, thanks.

    ·

  39. Ken Author Editor

    Great article. I just employed the java script option and it works great. Thanks for taking the time to write this.

    ·

  40. gaus surahman Author Editor

    Good roundup.
    I implemented matthews method in my drupal themes, try this: drupal.org/project/plaingrail

    I know it needs more layout variations, but at least it’s the real world example and surely not for Dimitris, sorry :)

    ·

  41. colombopro Author Editor

    very informative. but how i can add borders to columns.
    javascript solution is the only thing that can be add borders to divs.

    ·

  42. Businessmess Author Editor

    I just looked at the wordpress theme ‘neoclassical’. This theme is nice but I want to do some tinkering to it. The thing is I can not find how it added borders to middle column. It has not used any borders in style.css.

    ·

  43. 涂聚文 Author Editor

    谢谢共享技术,让我们学习得更好。

    ·

  44. jason Author Editor

    good thinks

    ·

  45. Web Dizajn Artist Author Editor

    Too bad it doesn’t work for ie7.

    ·

  46. NewGadgetz Author Editor

    Very handy tips. Thank you

    ·

  47. webeno Author Editor

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

    ·

  48. kiruba Author Editor

    Nice!!!

    ·

  49. Jos Berkemeijer Author Editor

    It’s simple:
    Use a form to fit the divs in.

    Basic:

    table 1row1-1row1-2 table 2row2-1

    ·

  50. Jos Berkemeijer Author Editor

    It’s simple: Put a fake table around it:

    <table ><tr><td><div style="clear:left;float:left;width:140px;">table 1<br>row1-1<br>row1-2</div> <div style="clear:right;float:right;width:140px;">table 2<br>row2-1</div></td></tr></table>

    ·

  51. Amir H Fadaee Author Editor

    very nice!

    ·

  52. obedaih Author Editor

    some little dislectic mistakes without even taking the time to test them ->

    Method 2: Using JavaScript:
    *css, line 4; twice right.
    *css, line14; .content should be .rightsidebar.

    Method 3: Faux Columns:
    *html, line 2; ain’t equal to the css class.
    *html, line 4; ain’t equal to the css class.
    also it’s beter to call your left column “sidebar1″ and your right column “sidebar2″ instead of left and right.

    Method 4: Using Separate Background Color elements:

    *css, line 13: should be margin-right.
    *css, line 18: should be margin-right.
    *css, line 34: should be margin-left.
    *css, line 42: should be margin-left.

    try to use css shorthand:
    instead of writting “margin-right: 200px;”
    just write “margin: 0 200px 0 0;”
    write your background just as background instead of background-color.
    write your css in an alphabetical order.

    in your html you use a class as your main trigger for your css, this should be an “div id” instead of a “div class”

    why you ask?

    would you use a table for you layout??
    it’s like driving a car backwards on a highway, it will get you from a to b, but is it the right way?

    etc etc..

    just.. check your tutorial one more time please or put it offline, this tut will not help people for sure

    ·

  53. zoel Author Editor

    nice, but I thing method one is good method ;-) Using display: table Attribute, we can make balancing of columns, thnx

    ·

  54. Everyone Author Editor

    Finally a tutorial that gracefully (Method 1) solves the problem I’ve been tackling for some time unsuccesfully, until now. Much thanks!

    ·

  55. Jesus Author Editor

    Great post! I decided to look around for more options and found this:

    http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-equal-columns-with-css3-gradients/

    It’s using css3 gradients instead of a background image! Which removes the problem of having to switch out backgrounds everytime you want to change the dimensions of your columns. Good stuff..

    ·

  56. Michael Author Editor

    FYI – the method 2 and 3 “in action” example pages are switched

    ·

  57. Ankit Author Editor

    Hi,

    Thanx a lot… its working great tuts. Help me a lot…

    ·

  58. Erick G. Author Editor

    When I use the “Copy to clipboard” option I always get the line number with the source code… Do I have to point that is far from useful?

    ·

  59. Elixon Author Editor

    Or as simple as it can be… http://www.webdevelopers.eu/jquery/fixheight/demo

    ·

  60. Aamir Afridi Author Editor

    Equal height plus three dots ;)

    http://aamirafridi.com/jquery/jquery-equal-columns-height-plugin

    ·

  61. Shakaama Live Author Editor

    Here’s a question:

    Is all of this not rendered moot, with the advent of 960 grid system? Which is cross browser compatible and renders on smart phones as well.

    This is not a negative comment, so please don’t delete it, like you did that one guy. I’m simply just asking. seriously

    ·

  62. webguest Author Editor

    here’s a simple and flexible solution that works with ie6 to 9, opera, firefox, safari … without javascript, images, css hacks ….
    http://www.datatex.org/the-best-solution-for-css-columns-with-equal-height.html

    ·

  63. Karate Sherwood Park Author Editor

    Hmm it appears like your site ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any suggestions for newbie blog writers? I’d genuinely appreciate it.

    ·

  64. khubab Author Editor

    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/

    ·

  65. seo optimizacija Author Editor

    Another great tutorial, i just love this kind of articles and tuts from which you can learn a lot of new things with css, jquery and javascript.

    ·

  66. vencanice Author Editor

    Great work, well explained css tutorial. I preffer the last method.

    ·

  67. Website Design Mumbai And Flash Website Makers Author Editor

    Nice Post loved it! Thanks For sharing such info!

    Great Job

    ·

  68. Pablo Molina Author Editor

    Hello:

    There is another method, css compliant, multi browser. Images below colums, as background of parent container. Using repeat-y.

    And easy to implement.

    ·

  69. Dwight Zahringer Author Editor

    Thanks for this post – CSS and creating layouts can get messy and there are a lot of good points in here. Easy to follow as well – even though this is from 2009 still serves purpose in 2011!

    ·

  70. Pelinor Author Editor

    On solution #4, I finally got it to work by examining the page source and using the CSS and HTML mark-up provided there. Then reading your explanation on how to compute the sizes of the columns. It will be interesting to see how this works with a header and footer div tossed into the mix but I do love the pure CSS solution concept.

    The only quibble I have is that when using this method it would appear that I am stuck with fixing the width of all columns and I would truly love to have a flexible width content div…

    ·

  71. apple store ipad Author Editor

    After I initially left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and from now on each time a comment is added I get four emails with the exact same comment. Is there a way you can remove me from that service? Appreciate it!

    ·

  72. Birthstone Rings Author Editor

    An interesting discussion is worth comment. I do think that you need to publish more about this subject matter, it might not be a taboo matter but usually folks don’t discuss these subjects. To the next! Cheers!!

    ·

  73. Emilio Author Editor

    There is a malicious iframe on this page.

    ·

  74. Free WoW Game Time Author Editor

    Very alluring web blog, keep it up.

    ·

  75. free runescape membership generator Author Editor

    Thank you for the methods of height columns! Will help a lot.

    ·

  76. Cashway Author Editor

    Nice Blog, I was looking for exactly this tutorial. Thanks

    ·

 

Build Internet by One Mighty Roar. Since 2008.