HTML・CSSでのレイアウトが思ったようにいかず困っています。

画像がなくなった場合はタイトルと文章は画像がない分
横に伸びるようにしたいので
タイトル　画像　文章　それぞれにwidhtを指定せずに

タイトル　　　　　　　　　　■■■■
￣￣￣￣￣￣￣￣￣￣￣￣￣￣■画像■
ここに文章がはいります。ここ■■■■
に文章が入ります。

としたいのですが
タイトルの下に設定したborder-bottomが伸びず

タイトル　　　　　　　　　　■■■■
￣￣￣￣　　　　　　　　　　■画像■
ここに文章がはいります。ここ■■■■
に文章が入ります。

となってしまいます。

■HTML
<div>
<h2>タイトル</h2>
<span><img alt="画像" src="" ></span>
<p>こここに文章がはいります。ここに文章がはいります。</p>
</div>

■CSS
div{width:600px;}
h2{float:left; border-bottom:1px solid #000;}
span{float:right;}
p{clear:left;}

どなたかおわかりになる方がいらっしゃいましたら、助言いただきたいです。