浮動小数点数のテキストは右ではありません

Question

タイトルの下の左にイメージをプッシュしようとしています。説明テキストを右側に浮動させるだけです。私はイメージの浮きをクリアするように見えることはできません。

HTML：

<div class="title">System Displays</div> 
<div class="description">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 
<img src="http://dummyimage.com/400x200/000/fff" /> 
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div> 

CSS：

.title {  
width: 200px; 
float: left; 
} 

.description{  
width: 200px; 
float: right; 
} 

.description img { 
float: left; 
clear: both; 
} 

jsfiddleが明確です。余分なHTMLを挿入することはできません。アドバイスありがとう。

編集：この[jsfiddle]は、私が目で見たいものです。しかし、position: relative;が適切かどうかはわかりません。

Answer 1

あなたのjsfiddleはあなたのサンプルコードと大きく異なります。ここに固定jsfiddle demoです。

.descriptionに固定幅が必要な場合は、別の解決策が必要になります。そのコンテナボックスの外に何かを浮かべることはできません。

absoluteポジショニングを使用する別の方法の例を次に示します。

.description img { 
position:absolute; 
top:25px; 
left:0; 
width:200px; 
} 

Demo

ここrelativeポジショニングを使用して別の方法である：

.description img { 
    width:200px; 
    position:relative; 
    left:-220px; 
    float:left; 
    margin-bottom:-100px; 
} 

Demo