align text with bottom of images - css

Question

Starting with the markup
#row { }
#label { float: left; width:100px }
#image { float: left }
<div id="row">
<div id="label">Label Here</div>
<div id="image"><img src="http://placekitten.com/100"></div>
<div id="image"><img src="http://placekitten.com/100"></div>
</div>
As shown here: http://jsfiddle.net/Hyx5n/
I would like to move the label down to the bottom edge of the images. So it looks like this:
I have tried putting "position: relative" in the container and "position absolute" in the label div. But then the images are no longer in the same row: http://jsfiddle.net/Hyx5n/1/

Answer 1

You can do something like the following (http://jsfiddle.net/Hyx5n/10/). One of the many uses of vertical-align property. This involves removing the <div>'s and the float though. You can probably replace these with <span>'s with display:inline-block to give more flexibility.
HTML:
<div id="row">
<span id="label">Label Here</span>
<img src="http://placekitten.com/100" />
<img src="http://placekitten.com/100" />
</div>
CSS:
#row { vertical-align:bottom }
#label { display:inline-block; }

Answer 2

Try it like this: http://jsfiddle.net/uac3Z/
Basically,
<div id="row">
<div id="label">Label Heere</div>
<div id="images">
<div class="image"><img src="http://placekitten.com/100"></div>
<div class="image"><img src="http://placekitten.com/100"></div>
</div>
</div>
with
#row { position:relative; float:left; }
#label { position: absolute; bottom: 0; width:100px }
.image { float: left }
#images { margin-left: 110px }
I made a div#images that encapsulates both other div.image's. Then those div#row was set to float, having the text lying on the bottom. Hence, The div#label would appear above the image. In order to have the div#label on the left of the image, I made the div#images have a margin-left of 110px (as div#label would have 100px).
Also note that your current div#image should be a class and not an id, because you use it more than once.
Hope it helps :)