title: CSS table, varying dimensions
body: <p>I'm working on a responsive layout that displays some <code>&lt;div&gt;</code> boxes as part of a rectangular grid:</p>
  
  <p><a href="http://sl.cosd.com" rel="nofollow">http://sl.cosd.com</a></p>
  
  <p>The six boxes you can see on this page are all ungrouped in the HTML source, all in a row:</p>
  
  <pre><code>&lt;div class="control"&gt;
  &lt;div class="controlContent"&gt;
  &lt;a&gt;SOME VARIABLE-HEIGHT CONTENT including an image which might float&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>control</code> divs assign the boxes percentage widths to first the whole, then 1/2 or 1/3 the screen width, so they double &amp; triple up into rows as the screen size is increased. The <code>controlContent</code> divs assign properties like padding, margin, background, <code>border-radius</code>, etc.</p>
  
  <p>I have imagined this as a linear set of boxes, standards-compliant and screenreader-friendly, to be displayed via CSS like a table. I know CSS2.1 allows elements to be assigned properties like:</p>
  
  <pre><code>display: table;
  display: table-row;
  display: table-cell;
  </code></pre>
  
  <p><em><strong>My main problem:</em></strong> I have assigned <code>display: table-cell</code> to these elements (via the <code>controlContent</code> div) which prevents margin collapse inside the content but does not provide a uniform height to the cell-like divs. <strong><em>I need a way for all siblings on the same row to have matching height.</em></strong></p>
  
  <p>The smaller cells generally have gaps below them where the gradient background only covers the box height of the cell. (Worse, the text after this array of cells sometimes fills into these gaps: another problem that could be fixed with presentation markup, though one which will probably go away when the first problem is fixed.)</p>
  
  <p>I think I understand the basics of the problem: each <code>&lt;div&gt;</code> which I have told to behave like a table cell has nothing to match its height to, since I have no way of grouping elements into a containing <code>&lt;div&gt;</code> to which I can assign the <code>display: table-row</code> property, since this grouping changes according to CSS media queries.</p>
  
  <p>In my reading about the problem I've heard of <em>anonymous table boxes</em> and <em>anonymous table rows</em> being created but don't know how to use them in this case. Since I'm using the CSS <code>:nth-child()</code> selectors to clear the floating boxes at the beginning of each new row, I'd hoped I could also use these selectors to establish a new table row at every such point... but how?</p>
  
  <p>I'm not married to any particular solution. I'd just like to know the best-practice way of doing this. I'm hoping to find a solution that doesn't involve presentation markup, especially since a general solution should provide a responsive variable-dimension table for any number of cells, not just a small, easily factorable number like 6.</p>