Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I remember first starting out using tables for layouts and learned that I should not be doing that. I am working on a new site and can not seem to do equal height columns without using tables. Here is an example of the attempt with div tags.

<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div style="clear:both"></div>
</div>

Now what I tried with that was doing making columns float left and setting their widths to 33% which works fine, I use the clear:both div so that the row would be the size of the biggest column, but the columns will be different sizes based on how much content they have. I have found many fixes which mostly involve css hacks and just making it look like its right but that's not what I want. I thought of just doing it in javascript but then it would look different for those who choose to disable their javascript. The only true way of doing it that I can think of is using tables since the cells all have equal heights in the same row. But I know its bad to use tables. After searching forever I than came across this: http://intangiblestyle.com/lab/equal-height-columns-with-css/ What it seems to do is exactly the same as tables since its just setting its display exactly like tables. Would using that be just as bad as using tables? I honestly can't find anything else that I could do.

edit

@Su' I have looked into "faux columns" and do not think that is what I want. I think I would be able to implement better designs for my site using the display:table method. I posted this question because I just wasn't sure if I should since I have always heard its bad using tables in website layouts.

share|improve this question

migrated from stackoverflow.com Aug 2 '11 at 3:49

This question came from our site for professional and enthusiast programmers.

1 Answer 1

No, using display: table, display: table-row, and display: table-cell would not be as bad as using <table> tags. The reason for that is that HTML is a semantic language, meaning that the tags used should describe the content that is within. In this case, CSS can be used to describe to the browser how the data should be presented, and since the functionality of presentation that you're after is that of a table, you can go right ahead and do that.

I will mention, however, that they are not supported in IE7 or below.

P.S. You could also check out some similar questions on Stack Overflow.

share|improve this answer
    
Thanks I guess I will use those in my layout now :) –  Kyle Aug 1 '11 at 23:25
    
Not a problem. If this helped you out, feel free to accept this answer. –  Nightfirecat Aug 1 '11 at 23:30
    
gonna upvote this since i just could not figure out a second way to do it.... having the columns set to height 100% while being in a height: auto row div should work in theory, but does not. very annoying. –  xyious Aug 2 '11 at 6:52
1  
Before getting into all the display:table trickery, I would suggest you first ask yourself if you truly need equal height columns or whether you just need your layout to look like the columns are equal height. If the latter, you should look into one of the "faux column" methods instead, which are simpler. The "check out" link above has a few examples. –  Su' Aug 2 '11 at 7:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.