CSS li float 2列組み

質問者様のイメージに完全には合わないかもしれませんが、妥協案が2つあります。

下記サンプルはwidth: 500pxの領域に、左から一定の位置に上揃えで2アイテムづつ画像＋テキストのブロックを並べる、という想定です。
検証環境はIE6/7、Firefox2.0～、Opera9.25 on Windows XPのみです。

ただし、どちらの場合も質問者様のコメントにありました背景画像でボトム合わせにしたライン、というのを上記4環境で完全に同じ結果を得ることはhackを使ってもできませんでした。
【妥協案A】では下記CSSサンプル中の<li>に対するbackgroundプロパティを：
---------------------------------------------------------------------
background: url(../images/line.gif) repeat-x bottom left;
---------------------------------------------------------------------
と定義すれば、IE6/7を除く他環境では下揃えでFIXしてくれているのですが、IE6/7ではスクロールバーが発生した場合は下がりきった位置でないと表示しません。で、IE6はアンダースコア・ハックで
---------------------------------------------------------------------
_background-attachment: fixed;
---------------------------------------------------------------------
を追加すれば固定位置に表示されるのですが、IE7はこれを適用すると逆に背景が表示されなくなりますので、結果、IE7ではこのレイアウトを実現するのは無理でした。
ですので、ラインを画像ではなくborderプロパティを使って引く、という仕様にサンプル中では変更しています。

---------------------------------------------------------------------
【妥協案A】overflowでスクロールバーが出てもよい
---------------------------------------------------------------------
【HTMLサンプル】
---------------------------------------------------------------------
<ul class="sample">
<li>
<img src="./images/img_a.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_b.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキスト</p>
</li>
</ul>
---------------------------------------------------------------------
【CSSサンプル】
---------------------------------------------------------------------
ul.sample {
display: inline-block;
width: 500px;（親要素で幅が決まっていれば特に定義不要）
list-style: none;
padding: 0;
margin: 0;
}
ul.sample:after {
content: "";
display: block;
clear: both;
}
ul.sample li {
width: 240px;（500pxを2等分したものから更に右マージン10pxを引いた値）
height: 60px;（これは適当なので、適切な値を定義）
float: left;
overflow: auto;
border-bottom: solid 1px #000000;
padding: 0;
margin: 10px 10px 10px 0;（上下マージンの値はお好みで）
}
ul.sample li img,
ul.sample li p {
margin-right: 20px;（overflowでスクロールバーが出た時に中のデータの右端がスクロールバーに隠れてしまうのを防ぐ為の余裕）
}
---------------------------------------------------------------------
メリット：テキスト量やフォントサイズの変更に左右されることなく、固定値の高さを保ったままアイテムを均一に並べて行くことが可能。中に入るデータ量を気にせず、どのアイテムにも同じマークアップとクラスが適用される為、アイテムの増減があってもメンテナンスが楽。
デメリット：スクロールバーが発生するアイテムの場合、一瞥で全体を見ることができない。

---------------------------------------------------------------------
【妥協案B】スクロールバーを出さず、アイテム全体を見せたい。
---------------------------------------------------------------------
【HTMLサンプル】
---------------------------------------------------------------------
<ul class="sample first-row">
<li>
<img src="./images/img_a.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_b.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>

<ul class="sample">
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>

<ul class="sample">
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキスト</p>
</li>
</ul>
---------------------------------------------------------------------
【CSSサンプル】
---------------------------------------------------------------------
ul.sample {
（【妥協案Aと同じ】）
}
ul.sample:after {
（【妥協案Aと同じ】）
}
ul.another li {
width: 200px;
float: left;
padding: 10px 0 0 0;
margin: 10px 10px 10px 0;
border-top: solid 1px #000000;
}
ul.another li img,
ul.another li p {
（【妥協案Aと同じ】）
}
ul.first-row li {
border-top: none;
margin-bottom: 0;
}
---------------------------------------------------------------------
メリット：アイテム全体が表示される。
デメリット：アイテムのデータ量によって、下の余白はまちまちとなる。2アイテムづつ上揃えにするには、2アイテム毎に<ul>～</ul>でマークアップしなければならない。ボーダー位置を揃えて見せる為に、border-bottomではなくborder-topで指定している為、最初の列には常に別のクラスも併合しておかなければならず、最後の列はボーダーを付けられない。

こんにちは

え～～と、お伝えしたかったのはそういうことではなくておそらく大外の枠のwidthのみ設定して(#2で言うところの<ul style="width:800px">)、float解除することなくfloat:left;した<li>を並べたものにしているのでしょうから左右の<li>の高さが異なると(#2で言うところのheight:51px;、height:50px;）（←これは<div>で生成されてる高さを表しています）
左の高さが右の高さより多いと必然的に
■■
　　■
の状態になるということです

なので左右の高さを揃えるか、clear:both;によってfloat解除する方法を提示しました

#2下側のサンプルで解決したというお声がかからないということは・・・
＞背景画像で下記のようにラインも入れてありますし
このライン画像も同じ位置にしたいのでしょうか？
HTMLでは無理（やろうと思えばできると思いますが）なのでjavascriptを使用することになります

『haightLine.js』
http://blog.webcreativepark.net/2007/07/26-01033 …
↑ここから取得してください

<script type="text/javascript" src="./heightLine.js"></script>
<style type="text/css"><!--
li {
width:400px;
float:left;
background-image:url("****.gif");
background-position:bottom;
background-repeat:no-repeat;
}
.left {
clear:both;
}
--></style>


<ul style="width:800px;margin:0px;padding:0px;list-style:none;">
<li class="heightLine-group1" style="background-color:red;">aa<br>ee</li>
<li class="heightLine-group1" style="background-color:blue;">bb</li>
<li class="heightLine-group2,left" style="background-color:yellow;">cc</li>
<li class="heightLine-group2" style="background-color:green;">dd<br>ff<br>gg</li>
</ul>
<div style="clear:both;"></div>

※サンプルですのでとりあえず<li>につけてますが質問の流れ的には<div>の方に画像は配置されてるでしょうから<li>ではなく<div>の方にclass="heightLine-group*"指定してください

※3番目の<li>についているclass="left"はjavascript off用のものですがjavascript offの時には左右の位置関係は変わりませんが上下のレイアウトは崩れます


一番いいのは2つずつ<ul>で結んで<li><div>にheight指定（左、右の高い方のheightで指定)しておいて
＞文字サイズを変更できるようにしてあったので
　↑javascript使用（？）の中で<li><div>のheightも同じ倍率掛けてやればできると思います

>li{

ん？divの指定は無いんだね
divは描画機構によってはliを無視した位置で描画されてliからはみ出るよ。
それが原因じゃない？
li側でoverflowを書いておくか内側のdivもwidthで制限したら治らない？

こんにちは

いまいちピンとこないですが・・・

■１つで<li>を表していて width:400px; 中に画像とテキストがあるということですよね？

heightはどうなっていますか？
左右2つのheightが揃っていないとそういった現象は確認できますが・・・

(例)※違いが分かるようにそれぞれにstyle指定してます
<ul style="width:800px;margin:0px;padding:0px;list-style:none;">
<li style="width:400px;height:51px;float:left;background-color:red;">aa</li>
<li style="width:400px;height:50px;float:left;background-color:blue;">bb</li>
<li style="width:400px;height:50px;float:left;background-color:yellow;">cc</li>
<li style="width:400px;height:50px;float:left;background-color:green;">dd</li>
</ul>
<div style="clear:both;"></div>

なので左右のheightを揃えるか

右と左でclass分けするなどして左のCSSにclear:both;を入れてください
(例)
<style type="text/css"><!--
li {
width:400px;
float:left;
}
.left {
clear:both;
}
--></style>


<ul style="width:800px;margin:0px;padding:0px;list-style:none;">
<li style="height:51px;background-color:red;">aa</li>
<li style="height:50px;background-color:blue;">bb</li>
<li style="height:50px;background-color:yellow;" class="left">cc</li>
<li style="height:50px;background-color:green;">dd</li>
</ul>
<div style="clear:both;"></div>

・・・position:relative;している意味は何でしょうか?

横幅を固定したら良いんじゃない？

widthで。