Aligning two DIVs by their child element - html

Question

I'm currently trying to figure out a way with CSS to layout semantically-defined multi-image figures, each image possibly with their own subcaptions. The semantic for this kind of figure is an outer <figure> div containing multiple <figure class=subfigure> divs. Each of the .subfigure divs contains exactly one <img> followed by a <figcaption class=subfigcaption>.
Here is a minimal working example on JSFiddle
Goal: I'm trying to achieve a kind of layout that is common in print media; each .subfigure is vertically aligned by the baseline of its unique <img> element, while its own .subfigcaption can run as long as it needs without affecting the relative positions of the <img> amongst each subfigure.
However, with my current layout code, I can only relatively align each .subfigure as a whole: the <img> and .subfigcaption is treated as an aggregate block. The result is, as can be seen in my working example, that a long subcaption can ruin the image alignments between the subfigures.
I'd really like to find a CSS solution that does not require me to change the semantically-relavant HTML. I've considered using the table layout format, but I don't see how to place the table rows correctly given the way my html is currently organized. Also, this style would be applied to a large number of content, so I can't exactly tweak each specific figure by hand.
Note: doing figure>figure {vertical-align: top;} looks okay for this example but isn't what I'm looking for. The goal is to mimic a print convention, that we align at the bottom of the images, not the top. In fact, the more exact goal is to have all the .subfigcaptions start at a common baseline, regardless of the relative size of the images.
Current layout
Desired layout

Answer 1

Err, am I missing something, or does just removing the vertical-align: middle give you the desired results:
http://jsfiddle.net/LzUaC/9/

Answer 2

Here is the demo:
http://jsfiddle.net/salman/LzUaC/29/
And the idea:
Use display: inline-block for sub figures so that:
They stack sideways
Their baselines align
Place images with width: 100%; height: auto; inside sub figures
Optionally set vertical-align: bottom; to remove those few pixels at the bottom
Place captions with float: left; inside sub figures so that:
They move out of the flow and do not affect the height of sub figure
Set width: 100%; to make them stretch all the way across sub figure
Use clear: both on the last figure caption (I think you should however it does not seem to have any effect)
The CSS:
figure {
margin: 1em 0;
text-align: center;
background-color: #CCC;
}
figure > figure {
display: inline-block;
background-color: #AAA;
}
figure > figure > img {
width: 100%;
height: auto;
vertical-align: bottom;
}
figure > figure > figcaption {
float: left;
width: 100%;
background-color: #999;
}
figure > figure + figcaption {
clear: both;
background-color: #666;
}
/*
* for testing
*/
figure > figure:nth-child(1) {
width: 31%;
}
figure > figure:nth-child(2) {
width: 31%;
}
figure > figure:nth-child(3) {
width: 25%;
}

Answer 3

I know this might scare you at first but give it a chance :-P You can always replace the tables with divs contenting display:table and table-cell.
This is about the only way I could think of to achieve this effect.
http://jsfiddle.net/LzUaC/5/
CSS
.fig-img{width:40%; text-align:center; vertical-align:bottom;}
.fig-img img{width:100%;}
.fig-caption{vertical-align:top;}
.fig-summary{text-align:center; padding-top:40px;}

Answer 4

Removing
figure>figure {
vertical-align : middle;
}
figure>figcaption {
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
}
and Adding
figure>figure>figcaption {
vertical-align : top;
display : inline-block;
}
figure>figcaption {
text-align : center;
}
does the magic: running demo
Not using flex, and works everywhere... except that in IE (what a surprise...)