The G String

One of the things that I found that CSS doesn’t handle adequately is arranging a layout as a grid.  Back in the day, when you’d have tables nested in tables nested in tables, it was a horiffic mess, but at least I always knew where I was with layout; and the table element seemed to handle different browsers more reliably too. Now we have a situation where the standard ‘correct’ approach will not work in IE, leaving the developer the choice of a hacky-workaround or providing for IE seperately.

Anyway, these days its bad form to use tables for layout, so I went about making a list of tracks on my web application into a grid using the CSS approach.

CSS supports table-like layouts using the display:table, display:table-row, display:table-cell styles. Whereas before you’d have

<table>
  <tr>
    <td>Hello</td>
  </tr>
</table>

Now you can use any element to form your table.

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell">Hello</div>
  </div>
</div>

What I wanted was to display my list of track objects on the screen using a grid, to make the best use of the horizontal space. But, when styles were turned off, I wanted to keep the list structure. I ended up using

<div class="trackgrid">
  <ul>
    <li>Track one<li>
    <li>Track two...</li>
  </ul>
</div>

div .trackgrid
{
  display: table;
}

div .trackgrid ul
{
 display : table-row;
}

.trackgrid ul li
{
  display : table-cell;
  list-display : none;
}

Which gives the desired effect of arranging the list elements horizontally and without the bullet marks. I used the same technique to create a horizonal menubar, and there are several other uses for it.