CSS: set hight to 100% of parent - css

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/