CSS float element

Question

Как я могу сделать строку (красный фон div) получить 100% ширину, когда это место для этого (под правильным элементом)?

DEMO: http://jsfiddle.net/TXDWj/

Html код:

<div class="left"></div> <div class="right"></div> 

<div class="text">Lorem ipsum dolor sit amet...</div> 

<div class="row">Lorem ipsum dolor ....</div> 

<div class="row">Lorem ipsum dolor sit amet...</div> 

<div class="row">Lorem ipsum dolor sit amet...</div> 

<div class="row">Lorem ipsum dolor sit amet..</div> 

И этот CSS код:

.right {width:170px; height:250px; float:right; background:lime;} 
.left {width:60px; height:100px; float:left; background:blue;} 
.text {float:left; background:aqua; padding:10px; width:400px} 
.row {float:left; background:red; margin:5px 0 0 60px; padding:10px; width:60%;} 

Update:

exptect поведения можно увидеть здесь: http://jsfiddle.net/TXDWj/22/

, но, не имея «row_extra» класс ... или Beter представление, чтобы получить представление о том: http://jsfiddle.net/TXDWj/37/

благодарит всех вас

Answer 1

Вы должны удалить поплавок .row и ясно поплавки влево.

.row { 
    background: red; 
    margin: 5px 0 0 60px; 
    padding: 10px; 
    clear: left; 
} 

UPDATED FIDDLE

(Ignore, что красный фон идет под зеленым фоном, а цвет только для демонстрации. Я также дал дополнительный запас для некоторых других DIVs, чтобы ближе приблизить макет , но снова это только для демонстрации.)

Answer 2

Необходимо изменить Ширина: 100%;