HTML 3つの横並び要素をリキッドデザイン

毎度お世話になっております。

今回、
max-widthが980pxの親要素があり、画面の大きさに合わせられるようリキッドデザインにしようと思います。

現在作成中のソース

HTML
<div class="flt clearfix">
<ul>
<li>
/* bdr=h3とpをborderで囲む要素 */
<div class="bdr">
<h2>title1</h2>
<p>texttext</p>
</div>
<img src="...">
</li>
<li>
<div class="bdr">
<h2>title2</h2>
<p>texttext</p>
</div>
<img src="...">
</li>
<li>
<div class="bdr">
<h2>title3</h2>
<p>texttext</p>
</div>
<img src="...">
</li>
</ul>
</div>

CSS
.flt {
overflow: hidden;
*zoom: 1;
max-width: 980px;
}

.flt ul {
margin: 0 -4.2% 0 0;
}
.bdr {
border: 1px solid #fff;
}
.flt li {
text-align: center;
float: left;
width: 29.41%;
padding: 20px 0;
margin: 0 3.5% 0 0;
list-style: none;
}
.flt li img {
float: left;
width: 102%;
max-width: 300px;
padding: 20px 0;
margin: 0 4.2% 0 0;
list-style: none;
}

CSSは、色々なサイトを参考に試行錯誤している途中になりますので、間違いが多いと思います。

classのflt要素が、3つ横並びになりまして、
liの中にはborderで囲ってあるテキストと、画像が上下に並ぶようにしたいです。

現状では画面の大きさを変えると、borderで囲ってあるテキストの高さが違うものが出てきてしまったり、画像の大きさが可変にならなかったりで、どうすればよいのかという状況です。
最終的に、
borderで囲ってある要素が3つ高さが統一され、
borderで囲ってある要素と画像の横幅が均一
になっていたいです。
3つの要素の間にも20pxほどの空きがあればと思います。

サイト調べてうまくいかなかったため、ご教授頂ければと思います。
知識不足でもうしわけございませんが、よろしくお願い致します。