5

I'm building a responsive design and I need two equal height columns. I don't want to rely on JavaScript, and I would like whitespace in between the columns for extra legibility.

I've made two layouts; one using display:table; and the other using float and position. The problem here is that I can't seem to get the latter method to have whitespace in between the columns, while the table method works fine in this aspect.

Because of this, I'd ideally like to use the table method, but I was wondering if this was an acceptable way to achieve an equal height column design for a webite that will utilize modern web standards?

Research on CSS Table Support

From a little research, I've found the display:table method to be compatible with the following browsers (by supporting all of the necessary CSS properties that I will need):

  • Chrome 1+
  • Firefox 1+
  • Internet Explorer 8+
  • Safari 1.2+
  • Opera 7+
  • Android 2.1+
  • iOS 3.2+
  • BlackBerry 6+
  • Internet Explorer Mobile 9+ (Windows Phone 7+)
  • Opera Mobile 10+
  • Opera Mini 5+
  • Nokia Browser 7.3+ (Symbian Anna)
  • Nokia Browser 8.5+ (MeeGo 1.2 on Nokia N9)

A Google search for "Is CSS display table a good idea?" reveals several articles which are against the CSS table method, In particular, this article which I've been reading. I'm aware that it's several years old, so what exactly is the overall acceptance of this method nowadays, considering the level of browser support I've found above?

Notes

  • I want to drop support for Internet Explorer 7 and below, and I'm not sure about Firefox 3 and below (open to suggestions).

  • Also, I would generally want to test in older browsers/browser versions, but my laptop doesn't have enough RAM to run a virtual machine and downloading the necessary files would take hours on an inconstant 10-20 Mb/s connection. Are there any alternatives (all other computers in the house don't have older browsers either)?

Thanks!

References

DylRicho
  • 895
  • 1
  • 10
  • 25
  • 2
    Tabular design layouts in HTML are hackish. CSS tables as you are using, via `display:table` seem perfectly acceptable.. I see no reason as to why you shouldn't do it this way. 1+ for a researched, and well asked question, we need more of those. – Josh Crozier Nov 14 '13 at 01:46
  • 1
    The main disadvantage of them is the redundant code needed, so if you enjoy lowered stress levels over pedantry, go for it! :) – Jacob Mulquin Nov 14 '13 at 01:47
  • 1
    Don't forget about inline-blocks and [flexboxes](http://css-tricks.com/snippets/css/a-guide-to-flexbox/), they're often a good solution to floats too. Also as far as vertical alignment, often times line-height can acheive the same effect as a parented:Display:table and a child:display:table;vertical-alignment: middle. – Jack Nov 14 '13 at 01:48
  • @mulquin I was hoping that I could bypass at least some of the coding by missing out defined `table-row` elements, since the spec states that the browser should automatically fill that in, if it's missing. For example, if I use `table` and `table-cell`, and intentionally miss out `table-row`, the browser should insert it for me (at least according to what I've been reading). Is it bad to use this concept? – DylRicho Nov 14 '13 at 02:14
  • 2
    @DylRicho: That's perfectly acceptable, as long as the anonymous boxes that are filled in will work correctly with your layout. For example, if you had a table box, with two children that are table cells, the anonymous row box that is created will always contain both of them. – BoltClock Nov 14 '13 at 02:39
  • @JoshC I don't really see the difference between html and css tables. All an element is, is browser default css collection. I think both are a bit hackish. – bjb568 Nov 14 '13 at 04:32
  • I'm thinking about how this may be "Primarily opinion based", but decided not to flag because a question about deprecation isn't. The wording is pretty unspecific. Is it deprecated? Good(isn) question, I believe the answer is no. Is it acceptable? That will be "Primarily opinion based". – bjb568 Nov 14 '13 at 04:40
  • @Dude I always seem to ask opinion-based questions here... – DylRicho Nov 14 '13 at 06:37
  • @BoltClock From the testing I've done, it does appear to work fine with my layout, so that's all good. Is there anything problematic about [this layout](http://jsfiddle.net/hAST4/1/)? – DylRicho Nov 14 '13 at 06:37
  • @DylRicho Really! [Yeah](http://stackoverflow.com/questions/19744045/should-i-use-the-new-html5-semantic-elements)... – bjb568 Nov 14 '13 at 06:46
  • @Dude So you're telling me Stackoverflow is only for yes-or-no questions? Pretty lame if you can't even discuss different techniques to certain situations, if you ask me. – DylRicho Nov 14 '13 at 06:48
  • 1
    @DylRicho: That seems fine (other than the missing `` end tags). And Stack Overflow isn't just for yes-or-no questions (some y/n questions are subjective too). It just doesn't like discussions and prefers technical answers that are clear-cut right or wrong. – BoltClock Nov 14 '13 at 06:50
  • @DylRicho An acceptable question is "What is wrong? I have `asdf(function(){}).foo.onclick.a.b.c()` and it's printing `hello` instead of `hi`. This isn't yes/no, but it also isn't as much of a preference or taste thing. – bjb568 Nov 14 '13 at 06:56
  • @Dude I merely wanted to ask other web developers, what they thought about the CSS table method for equal height columns, since I've seen many different examples, and this one worked well for me. Sure, I know it's opinion-based, but if multiple web developers with high reputation give it the all-clear, that's persuasive enough for me. I don't know if you realize this, but there aren't many websites where you can interact with other web developers in this manor. I'm not trying to go against Stackoverflow's rules or anything, I'm just wanting advise for my future decisions. :) – DylRicho Nov 14 '13 at 07:05
  • @BoltClock Oops, that was simply something I overlooked in Notepad++. [All fixed now](http://jsfiddle.net/hAST4/2/). Thanks for the input! – DylRicho Nov 14 '13 at 07:07
  • @DylRicho Google "ask a web developer forum" and yippee! You have 26 million results. – bjb568 Nov 14 '13 at 19:00
  • I already have enough online accounts; I don't need any more, thank you! – DylRicho Nov 15 '13 at 06:53

1 Answers1

1

Yes it is, take a look at Bootstrap 's source code, they grid this way

In your browser look for 

display: table;

and you will see how they implement it in the .row

Dvid Silva
  • 1,110
  • 13
  • 25