position:absolute inside float

[4587fghsmu38fj]

.gallery div {float:left; padding:1em; border:solid thin; height:300px; width:200px}
.gallery div em {display:block; position:absolute; bottom:0}

<div class=gallery>
<div><a href="/GalleryStorage/calypso1.jpg">
<img src="/GalleryStorage/Thbs/calypso1.jpg" height="277" width="200" /></a>
<em>Calypso bulbosa</em>
</div>
<!-- repeat inner div 20 times -->
</div>

all the text inside the <em>s get piled into the 2nd row of floats, on top of the images, not at the bottom of the div. firefox/ie7. doctype doesn't matter.

[Furiat]

From what I see the absolute positioning is not in regards to the gallery part div, but to the HTML element of the whole page. Possible solution:

.gallery div {float:left; padding:1em; border:solid thin; height:300px; width:200px; position:relative}

[4587fghsmu38fj]

that's it. the css2 standard is a bit unclear on this, but w3schools defines it thus:
"Generates an absolutely positioned element, positioned relative to the first parent element that has a position OTHER THAN STATIC".

thanks!