Is display:table a perfectly acceptable method for equal height columns?

Question

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

• My own testing in Chrome 30, Firefox 24/25, Safari 5.1.7, Opera 17, IE 10/11, IE8/IE9 using IE10 developer tools and Android 4.1.1.
• W3Schools CSS Reference - display; border-collapse; border-spacing; overflow
• MDN CSS Reference - display; border-collapse; border-spacing; overflow
• QuirksMode CSS Reference (scroll down to 'Index' section)
• MSDN CSS Compatibility in IE6-10 - display; border-collapse; border-spacing; overflow
• Can I Use... CSS Tables

Answer 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