плавающий текст справа, а не изображение

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 .

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

Если вам нужно .description для фиксированной ширины, вам понадобится другое решение. Вы не можете поместить что-либо за пределы его контейнера.

Вот пример другого метода, использующего позиционирование absolute.

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

Демо

Вот еще один метод, использующий relative позиционирование:

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

Демо