Элемент Div отображается вне родительского div

Question

У меня есть своеобразная проблема. Я разработал следующий макет. Макет отображается в соответствии с моим желанием, но когда я проверяю заголовок div, я обнаруживаю, что divs logo и navigation показаны за пределами выделенной части при перемещении курсора в заголовок div.

link to image for reference

Если не логотип и навигация ДИВ быть в пределах выделенной части, поскольку они находятся в пределах DIV заголовка в коде ?? Или это то, что я делаю что-то неправильно.

<div id="container"> 
     <div id="page"> 
      <div id="header"> 
       <div id="logo" style="float:left;" >Sample Text</div> 
       <div id="navigation" style="float:right"> 
        <ul style="text-decoration:none;"> 
         <li>Page 1</li> 
         <li>Page 2</li> 
         <li>Page 3</li> 
         <li>Page 4</li> 
        </ul> 
       </div> 

      </div> 
      <div id="features" style="clear:both;margin-top:15px;"> 
       <p>....Lorem Ipsum Part...</p> 
      </div> 
      <div id="footer"></div> 

     </div> 

    </div> 

Я использовал следующий минимальный CSS

body{ 
    background-image : url('../images/bg-body.gif'); 
    background-repeat : repeat; 
    font-family : Georgia; 
    color : white; 
} 
#container{ 
    margin : auto; 
    width : 960px; 
} 

#logo{ 
    font: 48px 'Pacifico', Helvetica, sans-serif; 
    color: #FCFAFA; 
    /*text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);*/ 
} 
#header{ 
    margin-top : 20px; 
} 
li{ 
    display:inline; 
} 

Answer 1

В основном вам нужно «очистить» свои поплавки, чтобы регулировать высоту контейнера. Так что, если вы установите

overflow: auto; 

на контейнере, в вашем случае header он будет «Encapsulate» он плавал ребенок. Here - хороший учебник, если вы хотите узнать больше.