Содержимое выходит из div

Question

На самом деле не могу понять, что с ним не так, но весь контент, который я добавляю в div, выходит из него, точно так же, как его нет.

Отметьте здесь: JSFiddle!

HTML___

<div id="wrapper"> 
    <div id="container"> 
     <div id="header"> 
      <div id="logo"> 
       TEXT GOES OUTSIDE OF DIV :'((
      </div> 
     </div> 
    </div> 
</div> 

CSS___

#container { 
    width: 960px; 
    margin: 20px auto 0 auto; 
    background: yellow; 
} 

#header { 
    position: relative; 
    width: 100%; 
    background: yellow; 
    border: 1px solid black; 
    padding: 2px; /*just to see the div*/ 
} 

#logo { 
    float: left; 
} 

Answer 1

Вы должны очистить поплавки:

<div id="wrapper"> 
    <div id="container"> 
     <div id="header"> 
      <div id="logo"> 
       TEXT NOW APPEARS INSIDE DIV :) 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </div> 
</div> 

Потому что вы плавали ваш логотип, любое содержание после него будет обернуть вокруг него , Это то, что вызывает эффект, который вы видите.

Answer 2

Добавить overflow:auto в свой #header DIV восстановить ожидаемое поведение:

#header { 
    position: relative; 
    width: 100%; 
    background: yellow; 
    border: 1px solid black; 
    overflow:auto; 
} 

jsFiddle example

Плавающий ребенка по существу удаляет его из потока и родитель разрушается. Добавление правила переполнения дает вам поведение, которое вы ожидали.