Настройка текста внизу 2 бок о бок divs

Question

Что мне нужно сделать, чтобы установить текст под 2 divs, которые отображаются бок о бок (задано «float: left»). Прямо сейчас текст из раздела «внизу» отображается справа от второго тега div.

CSS

#wrapper { 
    width: 500px; 
} 
#leftcolumn, #rightcolumn { 
    float: left; 
    height: 200px; 
    width: 250px; 
} 
#leftcolumn { 
    background-color: #111; 
} 
#rightcolumn { 
    background-color: #777; 
} 

HTML

<div id="wrapper"> 
    <div id="leftcolumn"></div> 
    <div id="rightcolumn"></div> 
</div> 
<div id="underneath"> 
    This should be underneath 
</div> 

Answer 1

#underneath { 
    clear: left; 
} 

Вот JSFiddle: http://jsfiddle.net/WPNgL/

Answer 2

вам просто нужно добавить в DIV очистить значение с плавающей точкой

 .clear{ 
     clear:both; 
     } 

Check on fiddle

Answer 3

#underneath{ 

    clear:both; 
} 

Вот так как вы использовали float:left, то #underneath ДИВ занимает пространство в левой, то, что вы можете сделать, это то, что использование clear:left или clear:both так что это появляется под другими контейнерами, хотя при использовании clear:both есть пространство слева и справа.

DEMO

ОТ http://www.w3schools.com/cssref/pr_class_clear.asp

В clear свойство определяет, какие стороны элемента, где другие плавающие элементы не допускаются.

left --> No floating elements allowed on the left side 
right --> No floating elements allowed on the right side 
both --> No floating elements allowed on either the left or the right side 
none --> Default. Allows floating elements on both sides 
inherit --> Specifies that the value of the clear property should be inherited from the parent element 

Answer 4

<div id="wrapper"> 
    <div id="leftcolumn"></div> 
    <div id="rightcolumn"></div> 
</div> 
<div style="clear:both"></div> 
    <div id="underneath"> 
    This should be underneath 
</div> 

Вы не очистили поплавок

<div style="clear:both"></div>