nested divs, jstree display and tablesorter table - html

Question

I'm having some issues when it comes to formatting a webapp I'm working. For some reason when I try to display a table next to a tree it shoves it under the tree instead of beside it.
Considering I haven't made a website since 1998 I think I'm doing ok, but anyway here's the code.
<div style="height:55px;border-bottom: 1px solid black;float:top;">
<div id="menu_div" style="height:50px;width:200px;margin-top:15px;margin-bottom:15px;display:inline-block;">
<ul id="menu">
<li>Menu
<ul>
<li>Configure IP</li>
<li>Configure Local Share</li>
<li>Send Files Now</li>
<li>Allow Remote Access</li>
<li>Add Source
<ul>
<li>MySQL</li>
<li>MSSQL</li>
<li>Remote Share</li>
</ul>
</li>
<li>Refresh Local Share</li>
<li>Backup Device</li>
</ul>
</li>
</ul>
</div>
<div style="float:right;margin-top:10px;display:inline-block;">
<span style="vertical-align:middle;margin-left:20px;"><img src="png/glyphicons_457_transfer.png" /></span>
<span id="deletePic" style="vertical-align:middle;margin-left:20px;"><img src="png/glyphicons_256_delete.png" /></span>
</div>
</div>
<div id="lower">
<div id="mainCon" style="width:300px;height:100%;border-right: 1px solid black;float:left;display:inline-block;">
<div id="browser"></div>
<div id="subBrowser"></div>
</div>
<div>
<div style="float:right;margin-left:320px;display:inline-block;">
<div id="displayTable"></div>
<pre><p style="margin-left:10px;" id="displayText"></p></pre>
</div>
</div>
</div>