2

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.

Improve this question
0

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • 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, 2011 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, 2011 at 7:25
1

I suggest you try using columns as follows with a media query to help avoid narrow screens displaying the columns if they will not work properly. It is coded for Chrome and Safari (-webkit) as well as for Firefox (-moz). You can change the column count and column gap to suit your needs. I find it to be quite reliable.

@media only screen and ( min-width: 1200px ) { 
  .two-col {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
      -webkit-column-gap: 1.5rem;
         -moz-column-gap: 1.5rem;
              column-gap: 1.5rem
  }
}

One other item. If you need the columns to align at the top regardless of whether one ends up with 12 lines and the other with 11 for example you can add vertical-align: top as well.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.