CSS table, varying dimensions - html

Question

I'm working on a responsive layout that displays some <div> boxes as part of a rectangular grid:
http://sl.cosd.com
The six boxes you can see on this page are all ungrouped in the HTML source, all in a row:
<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 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 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:
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 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.)
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 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?
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.

Answer 1

display:table-cell; should give the div/columns the same height, as long as the parent div has display:table; set.
Check this fiddle (you can add/remove as many cols as you want).
Another solution is to give .control a fixed height, then you can use height:100%; on controlContent.
If you need to use percentages only, then you've to declare an height on all the parent containers of .controlContent, up to html and body:
html, body, .control, .controlContent {
height:100%;
}
Obviously it's just a simplification. This is the most reliable method, because table-cell is not rendered properly by some older browsers.
On the other hand, you always have to know the height (in pixels or percentage) of all containers.
Then, there's the faux column method, but i don't thinks it suits your case.
Lastly, there's the JavaScript / jQuery method, which in your case would be something like
$(document).ready(function(){
var higherContent = 0;
$('.controlContent').each(function() {
var currentHeight = $(this).height();
if( currentHeight > higherContent ) higherContent = currentHeight;
}).height(higherContent);
});
Which basically (when the page loads) passes through all the controlContent and sets the value of the highest one in the variable higherContent. Then this value is assigned to all controlContent.
Probably not the best jQuery function ever written anyway :-) and you'ld have to adapt it for every resolution targeted by your media-queries.
If i were you, i would probably go for the table-cell method, so that you can set different widths for different resolution, and the layout will adapt in most of modern desktop/mobile browsers. But be sure to test it on as many devices as possible!
EDIT: I see you're using min-width media queries. You can change your code this way:
div.controlContent {
/* other stuff */
display: block;
/* other stuff */
}
#media only screen and (min-width: 480px) {
/* other stuff */
div.controlContent {
display: table-cell;
}
/* other stuff */
}