align text with bottom of images

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开发者_Python百科 the images are no longer in the same row: http://jsfiddle.net/Hyx5n/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; }

---

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 :)