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.