Is it bad use "display: table;" to organise a layout into 2 columns?
- by Colen
Hello,
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.
