Question

I have some some rows of image thumbs inside anchors inside a div, one div for each row, like this:

<div class="row"><a><img></a><a><img></a><a><img></a></div>
<div class="row"><a><img></a><a><img></a><a><img></a></div>

The images have different proportions, some portrait, some landscape orientation. The max dimensions for the thumbs are 150px (wide or tall), and they are always either 150px wide or high.

I want all images to align with the bottom of their parent .row div.
So if there is any portraits in a row, any landscapes will align at the bottom and have some space above them.
To have the images align at bottom, I position them absolute, and relative to their anchor
To do this, I use the following CSS:

<style>
div.row {
    float: left;
    clear: both;
}

.row a {
    position: relative;
    float: left;
    width: 175px;
}

.row a img{
    position: absolute;
    bottom: 0px;
}
</style>

The above works fine and as expected, but it’s got a flaw that I’m trying to fix: It requires the height of the relatively positioned anchor tags to be set to a specific size.

I don’t want that, because if a row contains only landscape thumbs, I do not want it to be unnecessarily high.

I want each .row div to be the height of the highest image it contains.

If there are only landscapes in a row, the height of that row will be just that of the highest landscape.

I though I would be able to fix this by setting the height if the elements to 100%:

<style>
.row a {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;   
}
</style>

That would then be 100% of its parent, the .row div. But for some reason, this only works if I specify the height of the .row div, and then I have the same problem (all rows equal hight regardless of actual content:

<style>
div.row {
    float: left;
    clear: both;
    height: 150px;
}

.row a {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;   
}
</style>

However, since the .row div grows dynamically with its contained images, it actually has the height I’m trying to refer to with my height : 100% for the a tag. But for some reason it does not work.

Why? What am I not understanding here, and how to do this?
I spend many hours on this before turning here, hopefully someone has the golden answer.

Answer 1

It’s possibly easier to use inline-block instead of floating. Something like this:

http://jsfiddle.net/cvQAZ/1/

Or do you need the links actually have the same height? Then try a “table” layout (not supported by IE6):

http://jsfiddle.net/DpvgR/1/