Nav with div inside (two different menus) - html

Question

I made an image of what I would like to do, sort of, but I cant seem to work it out.
What I would like:
I currently have the nav but it is all in a div, what I want to do, is to divide it, have two different divs and each with different content.
Here's my actual code.
UPDATED:
CSS
#nav
{
position:fixed;
top: 0;
left: 0;
width: 100%;
height:7%;
text-align: center;
padding: .5em 0 1em 0;
z-index: 1;
overflow: hidden;
background-image: -webkit-gradient(
linear,
right top,
left bottom,
color-stop(0, #E1A141),
color-stop(0.43, #DF7266)
);
background-image: -o-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: -moz-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: -webkit-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: -ms-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: linear-gradient(to left bottom, #E1A141 0%, #DF7266 43%);
}
div#a
{
float: left !important;
width: 50%;
display:inline !important;
}
div#b
{
float: left !important;
width: 50%;
}
#nav > ul
{
width:40%;
line-height: 0px;
display: inline-block;
}
#nav > ul:before,
#nav > ul:after
{
content: 'sentido';
width: 300%;
position: absolute;
top: 50%;
margin-top: -2px;
height: 5px;
border-top: solid 1px rgba(192,192,192,0.35);
border-bottom: solid 1px rgba(192,192,192,0.35);
}
#nav > ul:before
{
left: 100%;
margin-left: 1px;
}
#nav > ul:after
{
right: 100%;
margin-right: 1px;
}
#nav > ul > li
{
display: inline-block;
margin: -9px 0.5em 0 0.5em;
border-radius: 0.5em;
padding: 0.85em;
border: solid 1px transparent;
-moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
}
#nav > ul > li.active
{
border-color: rgba(192,192,192,0.35);
}
#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
color: inherit;
text-decoration: none;
border: 0;
outline: 0;
}
#nav > ul > li > ul
{
display: none;
}
html
<nav id="nav" style="z-index: 9999;" id="navigation">
<div id="a">
<ul>
<li>Inicio</li>
<li>Encuentra</li>
<li>Aventura al Azar</li>
<li>Contacto</li>
</ul>
</div>
<div id="b"> holibebe </div>
</nav>
Any help will be greatly appreciated.
Thanks,
Enrique Bravo.

Answer 1

Set your divs(1 and 2) to be 50% of their parent, in this case the nav element then float the divs and clear them.
BASIC example, going off of your image:
JsFiddle Example