Vertically centre variable-length content inside responsive boxes with fixed-pixel margins? - css

Question

I'm looking for the simplest way to achieve a type of layout that looks simple:
...but actually involves a lot of criteria, many of which involve non-trivial CSS issues:
Vertically centred content in a div...
...where the content is of variable length (so distance from top and bottom can't be hard coded)...
...where the div is inside a selection of floated divs...
...where those divs have percentage widths to fill the screen on a responsive layout...
...where there is a fixed pixel gap between each div...
...where the divs have solid background colours or images and the background behind the divs isn't a known solid colour that can be re-applied
Various elements of this have been addressed in separate questions (for example vertically aligning floated divs, and pixel gaps between responsive percentage-width divs), but I couldn't find anything combining them.
Simplest means:
As few HTML wrappers as possible
Minimal extra Javascript (none if possible)
Minimal CSS that needs to change when breakpoints change the number of divs on each row
Minimal code, quirks, or fragile CSS trickery (e.g. relying on browser quirks that could change in future)
Minimal cross browser issues (ideally, should work on IE8+ with minimal IE-specific markup)

Answer 1

Here's the simplest I can come up with. Code snippet below. It's basically an existing method for vertically centring floats, putting the background on the middle wrapper, and setting fixed pixel gaps using padding on the outer wrapper rather than margins with box-sizing: border-box;.
JSBIN demo
Three HTML elements per block - which seems to be the minimum for any floated vertically centred content where the inner content doesn't have a known height.
No JS
Only the % width needs to change to change the number of blocks per line
If the text content is too big for the div, the div expands slightly without breaking the layout - overflow: hidden; can be applied if this is undesirable
Works on IE8 with no issues (fails on IE7 if any poor souls still need to support IE7)
.box-outer {
box-sizing: border-box;
float: left;
/* editable */
width: 50%;
height: 110px;
padding: 1px 1px 0px 0px; /* sets gap */
/* Padding does't collapse like margins - 1px all round gives 2px gaps */
}
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
display: table; /* height doesn't fill without display: table */
/* editable: */
background: #99ffff;
padding: 8px;
}
.box-inner {
vertical-align: middle;
display: table-cell;
}
.boxes-container {
padding: 0px 0px 1px 1px; /* opposite of each box's padding */
/* editable: */
background: #ffffff url('http://freedesignfile.com/upload/2012/10/sky_clouds_03.jpg');
}
<div class="boxes-container clearfix">
<h2> Title </h2>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box content
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box with longer content
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box with significantly longer textual content
</div>
</div>
</div>
<br/>
<p style="text-align: center;"> <--- responsive width ---> </p>
</div>