Is it bad use “display: table;” to organise a layout into 2 columns?

Question

I am trying to make a 2 column layout, apparently the bane of CSS. I know you shouldn\'t use tables for layout, but I\'ve settled on this CSS. Note the use of display: table

Answer 1

You said using display:table for a great auto-width like columns?

I can't use css float, because I want the columns to expand and contract with the available space.

Then, you could also use flex properties! Let's get in that:

In CSS3 there were many properties added, there's one group called flex which is used to have flexible divs without using tables or display: table; also used when the user's using a small screen (maybe a mini laptop, tablet, big smartphone like Galaxy series or small...?). These are the properties:

• Parent.
  • This is the main container. For instance, let's say you've got a web with a very basic HTML structure, and with three divs (one with the main information, other used as sidebar and finally one to wrap te first two mentioned).
  • display: flex: this is used to tell the browser we're talking about flexible items. Use -webkit- before the value (inline-flex's also applicable) for Google and Safari support. You don't need to use -moz- or -o-, nor -ms-.
  • flex-direction: this is the orientation of the childs inside this parent. There are four available values for this one: row, column, row-reverse, or column-reverse. Because of you want a main div and a sidebar, ya shall use column. Use -moz- and -webkit- for more browser support.
  • justify-content: the alignment for X axis. Values: flex-start, flex-end, space-between, space-around, flex-center. I recommend using the fourth or fifth ones.
• Child.
  • For this case, I'll mean with child as main (not recommended) or div class="main" and aside or div class="sidebar".
  • order: used to order the divs, no matter which was placed first in the code. Here CSS wins against the HTML code used. The values are... numbers... use -moz- n -webkit- plz.
  • flex-grow: used to let a child be bigger than the rest, all depends on its value, and if there are other childs with other values for this property. -webkit- & -moz- r Rcomment ed.

Moar info at: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and http://www.w3schools.com/cssref/default.asp#flexible.

Oh, and here's the answer: yes, you can use it. Read at: http:/www.w3.org/TR/css3-flexbox/#intro. It says

table layout, designed for laying out 2D data in a tabular format

They doesn't talk about bad idea, it just sets its format to ACT (and maybe don't look like) like a table.

Answer 2

Using the display:table is fine when you're talking about semantics. The reason "tables are bad" in the first place is because the markup (HTML) is supposed to describe the content inside of it. So, if it's not data, it doesn't belong in a table.

Since you're just setting how the markup displays (in a table structure), that's perfectly fine.

However, this will not work for all browsers. Specifically IE6 and IE7 (and IE8 in "compatibility mode") will not display this correctly.

For more information on display types and browser support, you can refer to this: http://www.quirksmode.org/css/display.html

Answer 3

It would be swell if every possible layout could be done with css, with no tables or pseudo-tables in sight. But there are exceptions, and until html and css (and browser support) let us do it, be comfortable with your tables. The point, after all, is to satisfy your users, not to adhere to someone else's philosophy.