float text right, а не изображение

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. Спасибо за любой совет.

EDIT: И это [jsfiddle] - это то, чего я хочу достичь. Я не уверен, что position: relative; подходит.

Answer 1

Ваш jsfiddle сильно отличается от вашего примерного кода. Вот фиксированный jsfiddle demo.

.description img {  
    width: 200px; 
    float: left; 
} 

Если вам нужно .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