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:
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.
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:
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.
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.
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.
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.
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.
Great roundup, thanks!
so, instead of using faux coloumns, which works great, i should use some crazy css to get equal height columns?
@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.
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.
Very helpful, Thanks
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.
Amazing article! I didn't need it yet, but I'm sure that I'll...
Very smart, bravo.
I'd say this method is an alternative to faux columns, but doesn't replace it.
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.
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.
...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).
nicely done - thanks.
That is very nice.
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 :-)
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 - 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.
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 - 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.
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
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)
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.
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.
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 - 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.
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
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.
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.
Nice post! Very helpfull solution.
hi! just stumbled across your post on google.. Thank you so much! I have been trying to do something similar for months!
Any suggestions for making this work under IE7?
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!
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 - thanks for taking the time to post your findings.
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.
Very clever, thank you.
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.
Any chance you could try incorporating the fix for IE7 into your last example. I have not hand any luck so far.
Brett - I'll take a look.
content1
content2
and this
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
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?
The overflow:hidden does not work in Netscape! Is there a solution for this?
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?
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.
Does this work in IE7?
Jen - yes works fine in IE 7.
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. Whats the point of putting yourself through CSS if you really dont have to?
Great post: You just saved my day! :)
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?
#3 worked like a charm, thanks for the tip.
Aaron
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!
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
Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.
Check out 2 equal height columns layout generator using columns swapping technique: http://2columns.net
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.
Thanks for stuff.I was looking at the material over a large amount of time
Thanks! Saved me hours of effort!
Very good. Will be very handy on my next project!
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.
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
Good article Edward! I'm a rookie - your site let me learn more. Thanks! Przewozy Autokarowe
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.
life-saver! very thorough explanation...and doesnt leave much out!
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 youre 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.
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...
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.
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
Any chance you could try incorporating the fix for IE7 into your last example. I have not hand any luck so far.
Thanks for very interesting article.
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.
Thanks very Much!!!
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.
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.
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
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.
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.
Apologies for the three(?) misspellings.
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.
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.
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
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!
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.
Thanks, it is very useful information. my website is http://www.kadel.com.np and i use this idea in http://www.tibetexpedition.com
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.
great trick!!! this is totally what i needed!! thanks!!
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.
[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.
Thanks so much!!! Solved everything!!!
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.
Very helpful, thank you very much. IMO, much better than "faux column".
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.
Sorry, here is the url: Pure CSS Equal Height Columns
Thanks for that post ... I wish I found it last night before struggling for an hour with this problem.
@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.
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
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
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 ...
I surf with images turned off. :-)
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.
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.
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.
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?
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!
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...
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...
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!
Awesome, works like a charm! Thanks a bunch!
You save me hours! that problem was driving me crazy.
BIG THANKS
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...
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.
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.
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.
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.
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.
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?
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.
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
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.
This works great, but it fails when you have anchor tags linking to certain paragraphs in the page - any fix for that?
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!!!!!!!!!
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).
Crazy hack, but it works perfectly for me!
Thank you!
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.
Awesome help! Linked to you in my blog post: CSS Equal Height Columns
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
margin:-1000px; ??? what happend if the height of column is 2000px? i guess is a awful solution.
Niceeee!!! I was using jquery to make equal heights.
'Of course, we shouldn't use tables for layout'. You need read no further.
thanks, i use Faux Columns to solve my problem.
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!
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
Awesome - concisely solved the problem without any crazy hacks or tricks. Thanks!
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ü
"another way": great workaround...thanks a lot!
Thanks for valuable Post.. It solves my Problem..
Great tutorial! This is exactly what I needed. Thanks!
Appreciated! Just what I've needed!
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"?
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..
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"):
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
Thanks so much for your help. Still learning CSS and now I can do columns.
Keep up the good work.
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 ...
Wow, exactly the info I needed. Amazing that after 4+ years, it's still pertinent and effective!! Thanks!
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 nedir
herbalife nedir
herbalife nedir
herbalife ürünleri
herbalife
herbalife yorum
herbalife sipariş
herbalife urunleri satış
herbalife kulanalar
herbalife ürünleri
herbalife
dogalkilo kontrolu
herbalife
selefon ürünleri
Kilolara Çözüm
Plywood ürünleri
Yazılım ve donanım ürünleri
Musa Kaplan
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.
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.
BTW Musa Kaplan don't talk sh*t.
Thanks again great post, super useful.
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!
Thank you! Ur my hero Sir Eliot :)
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 ;)
Wow, nice tip! Thank you! :)
My site now looks a bit nicer and the approach #3 works in my smartphone's browser as wel.l Thanks.
Thanks! It´s a great solution for me, it works great.
Excellent article, thanks a lot!
Great, been looking for a purely css way of doing this. Very nice solution.
Thank you.
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/
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.
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!
fdasfsdfsdfs
OR %s
It is a wonderful website.
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!
thanks for ur blog
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..
Thank you so much. You win the war vs. tables. You, and auto margins.
Amazing, Solved my issue on one go Thanks :)
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
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
Very useful - have applied it to 2 columns on our site's front page. Thanks!
thanks..!
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??
av malzemeleri
Thanks! The "other way" presented here was a lifesaver!
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.
thanks..!
thnnks
Thanks.I also like to use CSS styles in designing web sites instead of tables.
Seo Hocasi
Seo
Seo ve Adwords
You win the war vs. tables. You, and auto margins.
thanks for ur blog
thank u for share good write