2 Div-высоты, объединенные вместе

Question

У меня есть два div внутри моего заголовка - один для навигационной панели (.site-navitation), а другой для моего заголовочного изображения (.side-branding). .site-navigation настроен на 50 пикселей в высоту, а сайт-брендинг установлен на 400 пикселей. При размещении один за другим, теоретически, div .site-branding должен начинать 50px с верхней части экрана, но по какой-то причине он начинается с 0,0, скрывая 50px от .site-branding позади div .site-navigation.

Если кто-нибудь может помочь мне понять, почему это может происходить, было бы весьма полезно. Чтобы увидеть проблему в действии, посетите http://www.noellesnotes.com.

Вот соответствующий код:

HTML

  <nav id="site-navigation" class="main-navigation" role="navigation"> 
        <h1 class="menu-toggle"><?php _e('Menu', 'portfolio'); ?></h1> 
        <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', '_s'); ?></a> 

        <?php wp_nav_menu(array('theme_location' => 'primary')); ?> 
      </nav><!-- #site-navigation --> 

      <div class="site-branding"> 
       <h1 class="site-title">Noelle Devoe</h1> 
       <h2 class="site-description"><?php bloginfo('description'); ?></h2> 
      </div> 

CSS

#site-navigation { 
    width: 100%; 
    height: 50px; 
    background-color: rgb(255, 255, 255); 
} 

.main-navigation { 
    clear: both; 
    display: block; 
    float: left; 
    width: 100%; 
} 

.site-branding { 
    width: 100%; 
    height: 400px; 
} 

.site-title { 
    width: 55%; 
    font-family: 'Playfair Display SC', serif; 
    text-transform: uppercase; 
    font-size: 4.5em; 
    background-color: rgba(199,101,56, 0.6); 
    line-height: 1em; 
    text-align: center; 
    color: rgb(255,255,255); 
} 

Answer 1

Снимите поплавок: левый в главной навигации класса, это будет решить вашу проблему