I’m working on a responsive layout that displays some <div> boxes, ungrouped in the source, as part of a rectangular grid:
Each of the boxes on this front page has this HTML structure:
<div class="control">
<div class="controlContent">
<a>SOME VARIABLE-HEIGHT CONTENT including an image which might float</a>
</div>
</div>
The control divs assign the boxes percentage widths to at first the whole, then 1/2 or 1/3 the screen width, so they double & triple up into rows as the screen size is increased. The controlContent divs assign properties like padding, margin, background, border-radius, etc.
I have imagined this as a linear flow of content (which will be read by screenreaders in source order), to be displayed via CSS like a table. I know CSS2.1 allows elements to be assigned properties like:
display: table;
display: table-row;
display: table-cell;
My main problem: I have assigned display: table-cell to these elements (via the controlContent div) which prevents margin collapse inside the content but does not provide a uniform height to the cell-like divs. I need a way for all siblings on the same row to have matching height.
The smaller cells 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.)
I think I understand the basics of the problem: each <div> 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 <div> to which I can assign the display: table-row property, since this grouping changes according to CSS media queries.
In my reading about the problem I’ve heard of “anonymous table boxes” and “anonymous table rows” being created but don’t know how to use them in this case. Since I’m using the CSS :nth-child() selectors to clear the floating boxes at the end of each row, I’d hoped I could use these selectors to establish a new table row at every such point… but how?
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 considering that a general solution should provide a responsive variable-dimension table for any number of boxes, not just a small, easily factorable number like 6.
Looking forward to your input & hoping I have missed something simple and straightforward.