how can I put one div under another (css)

Hi, I'm trying to put one div under another:

<div class="wrap">
 <div class="lowNav">
<a href="#" class="search">&nbsp;<span></span>&nbsp;</a>
<a href="#" class="nav">&nbsp;<span></span>&nbsp;</a>
</div>
<div class="searchbox">
<form action="http://google.com" method="get" target="_self"><input type="hidden" name="customize_messenger_channel" value="preview-0"><input type="hidden" name="customize_changeset_uuid" value="639cac79-978a-4d85-8d32-584c9d1c87d9"><button name="search" class="btn">
<span>
</span></button>
<input type="text" name="s" autocomplete="off" value=""></form>
<div class="autocomplete" style="display: none;">
</div></div><div class="nav">
     <ul class="sections">
<li>
<div class="menu"><ul>
<li class="page_item page-item-69"><a href="http://google.com" target="_self">shele</a></li>
</ul></div>
</li>
</ul>
<div class="clear"></div></div></div>

but the result I get is the following:

My css:

.wrap {
  white-space: nowrap;
}
.searchbox,
.nav{
    display: inline-block;
    *display:inline;/*for IE 7 */
    *zoom:1;/*for IE 7 */
    vertical-align:top;
}
.searchbox {            
    background-color:#ff0;
}

.nav {
    background-color:red;
}

How could I put one under another or at least because the code that I put does not propose me in that order?

example jsfiddler: link