Aligning Columns while Sizing Rows - html

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 2x2 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;
}
​

Answer 2

To be honest both versions are not accessible, and both are equally as annoying to use.
First and foremost: Why aren't you using <button>s or <input type="button">?
It isn't semantically correct for both demos. Tables are not meant to do anything besides hold data. A button should be used for submitting/cancelling/clearing forms. A <div> is that whatchamacallit you keep in your junk drawer, that you use for a last resort.
Table Method
There is no way to make the table accessible. It will be always bee seen as a table, but since this is being incorrectly used, the WAI-ARIA role of presentation needs to be used. However this will tell assistive technology to ignore the fact it is a table, thus chunking the words together. The only way to make the cells clickable, is via an onClick, which may be fired automatically depending on the AT and the way you construct the onClick. Thus not allowing the person get past it, and since they won't know it is a table, they can't jump over it.
CSS Method
First the <h2> elements are used incorrectly. <h2> are to denote sections of a page that contribute to page hierarchy, which it makes little sense that a button would be part of the hierarchy. Next, a <div> doesn't recieve focus by default. Third, if you attach an onClick to the <div>, you run into the same issue as above.
Using ARIA, you can make <div>s act like buttons but your code becomes:
<div class="left-col">
<div class="button" tabindex="-1" role="button">
Some text here
</div>
<div class="button" tabindex="-1" role="button">
And more text here
</div>
</div>
OR
<input type="button" value="some text here" />