Div появляется внутри Div, а не под

Question

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

Вопрос находится в разделе «Menubox» Div.

«Menubox» продолжает отображаться внутри «заголовка-поиска», а не снизу.

Вот HTML.

<header id="header-bar"> 
    <div id="innerheader"> 

     <div id="logobox"> 
     </div><!--End Logobox--> 

     <div id="header-search-box"> 
      <?php get_search_form(); ?> 
     </div> 

     <nav id="menubox"> 
      <?php ?> 
     </nav><!--End Menubox--> 

    </div><!--End Innerheader--> 
</header><!--End Header-bar--> 

Вот CSS ...

#header-bar { 
    background: #222; 
    height: 75px; 
} 

#innerheader { 
    width: 98%; 
    margin-left: auto; 
    margin-right: auto; 
    height: 75px; 
} 

#logobox { 
    float: left; 
    font-size: 2em; 
    font-weight: 700; 
    overflow: hidden; 
    width: 300px; 
    position:relative; 
    top:50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
} 

#header-search-box { 
    float:left; 
    margin-top:20px; 
} 

#menubox { 
    float: left; 
    margin-top: 20px; 
} 

Все идеи будут оценены.

Благодаря

Answer 1

Это потому, что вы использовали float:left для вашего header-search-box и menubox. Именно по этой причине он идет бок о бок. Удалите это, и вы получите желаемый результат.

#header-search-box { 
    /*float:left*/ 
    margin-top:20px; 
    } 

    #menubox { 
    /*float:left*/ 
    margin-top: 20px; 
    } 

DEMO

Answer 2

Вставка

<div style="clear:both;"></div> 

между двумя метками. Это действует как разделитель.