Results 1 to 14 of 14
Sep 25, 2012, 10:03 #1
- Join Date
- Aug 2012
- Dublin, Ireland
- 0 Post(s)
- 0 Thread(s)
responsive layout, variable-dimension CSS table?
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>
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;
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.