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

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 🙂