Float и vertical-align:bottom у элементов

[byxah]

Приветствую.

Необходимо реализовать макет списка работ в резине:
img1 - для узких мониторов
img2 - для широких мониторов

проблема в том что, для img2 - текст должен быть прилеплен на уровне низа фотки, а при сужении страницы перемещался под фотографию.

Пока удалось реализовать по групно:
float для картинки и небольшого хака с невидимой картинкой внутри span inline элемента для текста:

<img src="img" style="float:left;" height=300>
<span>
<img src="/i/1x1.gif" width=200 height=0>
Текст
</span>

но вертикального выравнивания не смог добится.

И наоборот, если сделать отображение для span через display: table-cell и задание высоты, то прижать текст к низу можно, но при сужении страницы текст не переносится под фотку.

<img src="img" style="float:left;" height=300>
<span style="display:table-cell; height:300px; vertical-align:bottom;">
<img src="/i/1x1.gif" width=200 height=0 >
Текст
</span>

Есть ли решение без JS или нет?

[bes]

display: inline-block

[Deff]

<style type="text/css">
span.wrap{
  display:inline-block; 
}
</style>
<div  class="section">

<span class="wrap">
        <img class="postimg" width="305" src="http://s1.uploads.ru/i/kQKJu.png"/>
</span>

<span class="wrap">
	<div>
  <img class="postimg" width="305" src="http://s1.uploads.ru/i/q2DnW.png"/>
	</div>
</span>


</div>
<br />


<div  class="section">

<span class=wrap><img class="postimg" src="http://s1.uploads.ru/i/kQKJu.png"/></span>
<span class="wrap">
	<div>
  <img src="http://s1.uploads.ru/i/q2DnW.png"/>
	</div>
</span>

</div>

Где картинка уменьшена - эт якобы большой экран

[byxah]

bes, Deff, спасибо.

все оказывается просто