HTML элемент появляется внешний элемент обертку с помощью DIV-х

Question

Я работаю на Visual Studio Express 2013 и создать проект по умолчанию на основе веб-формы с шаблоном по умолчанию, как показано в ссылке http://codepen.io/anon/pen/dPWzRd

По некоторым причинам Заголовок & элементы колонтитула появятся наши их основной как показано в примере codepen. Я пытался играть с несколькими свойствами css, но это нарушает дизайн.

<header> 
     <div class="header-wrapper"> 
      <div class="float-left"> 
       <p class="site-title"><a href="./"> logo here</a></p> 
      </div> 
      <div class="float-right"> 
       <nav> 
        <ul id="menu"> 
         <li><a href="./">Home</a></li> 
         <li><a href="About">About</a></li> 
         <li><a href="Contact">Contact</a></li> 
         <li><a href="Test">Test</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </header> 

Как II исправить это таким образом, чтобы Логотип и пункты меню показывают внутри заголовок обертки (в основном в красной коробке) и то же самое для нижнего колонтитула

Answer 1

когда вы должны элемент внутри в другой DIV и два div's плавают, после чего вам нужно добавить ясность.

раздвоенный пример

http://codepen.io/anon/pen/mymMMz

<header> 
     <div class="header-wrapper"> 
      <div class="float-left"> 
       <p class="site-title"><a href="./"> logo here</a></p> 
      </div> 
      <div class="float-right"> 
       <nav> 
        <ul id="menu"> 
         <li><a href="./">Home</a></li> 
         <li><a href="About">About</a></li> 
         <li><a href="Contact">Contact</a></li> 
         <li><a href="Test">Test</a></li> 
        </ul> 
       </nav> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </header> 


.clear { 
    clear: both; 
} 

или добавить overflow hidden к .header-wrapper

Answer 2

Вы можете просто использовать в CSS

display: inline-block;

вместо

float: left;

Полный пример:

.float-left { display: inline-block; }

Это потому, что стиль float делает элемент "невидимым" для родителей. Стиль display: inline-block действует как float, но «видимо».