2 100% width div, clear without using Top: - css

Question

I'm running into a problem.
I know this is probably a noob mistake but bear with me.
I'm making two top bar menus at the top, I can place them using absolute positioning and top, however when the browser size changes it makes the top bar look messed up.
Is there a way to place these without using absolute position and top?
This is what I currently have:
THE HTML
<div id="nav">
<div class="logo"><h1>Health Numeric ©</h1>Live a Something Life</div>
<div style="display:inline-block">
<ul>
<li><img class="icons" src="img/icons/dashboard.png" />Dashboard</li>
<li><img class="icons" src="img/icons/patient.png" />Patients</li>
<li><img class="icons" src="img/icons/devices.png" />Devices</li>
<li><img class="icons" src="img/icons/account.png" />Account</li>
<li><img class="icons" src="img/icons/support.png" />Support</li>
</ul>
</div>
<div class="end"><strong>LifeView</strong> Portal</div>
</div>
<div id="subnav">
<span class="clientname">Patient: Brian Town</span>
</div>
<div id="bod">
<h1> test</h1>
</div>
The CSS
#nav h1 {
font: Verdana, Geneva, sans-serif;
font-size: 24px;
margin-bottom: 2px;
}
.logo {
width: 190px;
margin: auto 80px auto 50px;
display: inline-block;
vertical-align: top;
}
#nav {
position: fixed;
/*height: 65px;*/
width: 100%;
float: left;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0389FF), color-stop(1, #000000));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0389FF 0%, #000000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0389FF 0%, #000000 100%);
}
#nav ul {
list-style: none;
width: 450px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
border-right: 1px solid #ccc;
}
#nav li:first-child a {
border-left: 1px solid #ccc;
}
#nav li a:hover {
color: #23afff;
}
.end {
width: 200px;
margin: 10px auto auto 50px;
display: inline-block;
word-spacing: 20px;
vertical-align: top;
}
strong {
font: Verdana, Geneva, sans-serif;
font-size: 36px;
margin-bottom: 2px;
}
.icons {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
height: 35px;
width: 35px;
}
#subnav {
position: fixed;
overflow:hidden;
height: 20px;
width: 100%;
float: left;
left: 0px;
/*top: 65px;*/
margin: 0px;
padding: 0px;
border: 1px solid #333;
border-bottom: 1px solid #ccc;
color: #000000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #666666 0%, #FFFFFF 100%);
}
.clientname {
float: right;
margin-right: 120px;
color: #000000;
font-weight: bold;
}
#bod {
position: absolute;
width: 100%;
float: left;
left: 0px;
top: 85px;
margin: 0px;
padding: 0px;
color: #000000;
}
Here is a JSfiddle: http://jsfiddle.net/Artsen/HYZLR/
Thanks