CSS DIV тег поплавка вопрос

Question

На изменение размера браузера, я хочу, чтобы получить результат, показанный на втором рисунке, не входя в положение, показанное на первой картинке. http://jsfiddle.net/gtczu/19/

<div id="lft-widget" style=" border:solid red 3px"></div> 
<div id="rgt-widget" style=" border:solid blue 3px"></div> 
<div id="center-widget" style="border:solid green 1px"></div> 

@charset"utf-8"; 

/* CSS Document */ 
* { 
    margin:0; 
    padding:0 
} 
a, a:hover { 
    text-decoration:none; 
    border:none 
} 

body { 
    margin:0; 
    padding:0; 
} 
#center-widget { 
    position :relative; 
    width:300px; 
    height:auto; 
    float:left; 
    padding: 5px 0 15px 30px; 
} 
#lft-widget { 
    width:234px; 
    height:auto; 
    position:relative; 
    float:right; 
    padding:25px 25px 0 0px; 
} 
#rgt-widget { 
    width:200px; 
    height:auto; 
    float:left; 
    padding: 2px 22px 72px 30px; 
    position:relative; 
} 

То, что я хочу, когда я изменить размер браузера, #center-widget должен плавать на дно #rgt-widget. это будет успешным в этом случае, но при изменении размера оно поместит нижнюю часть #lft-widget, а затем поплавок снизу #rgt-widget. Я хочу, чтобы он прямо плавал в нижней части #rgt-widget.

Я хочу достичь этого.

не входя в это положение.

Answer 1

Добавить

clear:left; 

в центральный виджет CSS и он должен упасть под RGT-виджета DIV при развертывании окна.