Почему мой div не помещен «внутри» обертки div?

Question

В следующем коде #wrapper div содержит #left и #right div. Но они не могут содержаться внутри div #wrapper.

Я хочу, чтобы рассматриваться как содержание #wrapper DIV, поэтому они содержатся внутри него, оставляя 10pxpadding прикладывается к #wrapper. Почему они перемещены?

JSFiddle here.

<div id="wrapper"> 
    <div id="left">Alpha</div> 
    <div id="right">Bravo</div> 
</div> 

CSS-выглядит следующим образом.

#wrapper { 
    background-color:grey; 
    border-top: 1px solid black; 
    border-botton: 1px solid black; 
    padding:10px; 
} 
#left { 
    background-color:yellow; 
    float:left; 
} 
#right { 
    background-color:pink; 
    float:right; 
} 

Я хочу, чтобы решить эту проблему без манипулирования позиции атрибутов #wrapper, поскольку это может нарушить нормальную структуру моей страницы (боюсь, что так).

Answer 1

Потому что вы плаваете, чтобы они сидели вне потока DOM. Если вы хотите, родитель, чтобы рассмотреть их, добавьте overflow: hidden в родительский CSS или добавить DIV в нижней части контейнера с правилом clear: both;

Демо: http://jsfiddle.net/cros1mrv/1/

Answer 2

Из-за плавающими. Один из способов очистить это использовать:

#wrapper { 
    overflow: hidden; 
} 

Answer 3

Вы должны установить переполнение вашей обертки overflow: auto течь вокруг плавающих див.

#wrapper { 
    background-color: grey; 
    border-top: 1px solid black; 
    border-botton: 1px solid black; 
    padding: 10px; 
    overflow: auto; 
} 

См. this fiddle.