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 etc.

div.container {
  width: 600px; height: 300px; margin: auto;
  display: table; table-layout: fixed;
  }

ul {
  white-space: nowrap; overflow: hidden;
  display: table-cell;
  width: 40%;
  }

div.inner {
  display: table-cell;
  width: auto;
  }

With this layout:

<div class="container">

  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    </ul>

  <div class="inner">
    <p>Hello world</p>
    </div>

  </div>

This seems to work admirably. However, I can’t help wondering – am I obeying the letter of the “don’t use tables” rule, but not the spirit? I think it’s ok, since there’s no positioning markup in the HTML code, but I’m just not sure about the “right” way to do it.

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

Please, stack overflow, help me resolve my existential sense of dread at these pseudo-tables.

Answer 1

There are two essential arguments for not using tables:

1. Semantic markup.
2. Avoiding tag soup. (too many tags)

So, your method is not really violating either of those goals. However, you should check this code in IE7 and IE6 – you are likely to see some inconsistencies there.

As was mentioned – don’t worry about sticking to these rules too tightly. They are guidelines, and you should use the right tool for the job you are doing. What is important here is knowing what the various techniques are best for, and when to use them. Sometimes, using a table is the best tool for what you are trying to do, sometimes it is not.