Question

I’ve got two pages, one made with div‘s and CSS, one made with the notorious table.

The CSS Page…

…and the Table page.

At first glance, they’re pretty similar. Both sport a 2×2 grid of rounded “buttons”, which resize based on the window around them.

Now, put this in the context of a mobile phone. That’s right, shrink that result-frame down (horizontally, don’t worry about vertical).

Originally, i just had the CSS version, but there’s specific browser widths in which text on the left drops down to two lines where text on the right stays at one, as the strings are different lengths. It just so happens that with the actual strings, most phone resolutions cause this annoying situation to occur.

However, the table predictably acts the way I would want it to. The table has a concept of “rows” as well as “columns”, so the columns stay aligned and as a cell in one row gets taller, so do all the rest.

Is there a way to mimic this behavior in CSS? I’m constantly told how bad tables are for accessibility, etc. And I’m a fan of keeping <table> for actual tables of data, not layout.

I know of the adjacent-selector, but I couldn’t find a way to say “make your min-height the same as my height, and vice-versa”.

Also, obviously this could be done with a script. But unless someone here has a passionately feels that for this problem, javascript > CSS && javascript > Table, let’s stick to CSS.

Answer 1

Every sane browser today should support the display: table/table-row/table-cell/... property, which converts your divs to a nice table, but without touching the html markup.

Here is your transformed code:

http://jsfiddle.net/eU6Xe/5/

HTML:

<div id="main">
    <div class="row">
        <div class="button">
            Some text here
        </div>

        <div class="button">
            And more text here
        </div>
    </div>

    <div class="row">
        <div class="button">
            More Text
        </div>

        <div class="button">
            Lots of text here
        </div>
    </div>
</div>

​CSS:

div #main {
    display: table;
    width: 100%;
}

div.row {
    display: table-row;
}

div.button {
    display: table-cell;
}

​