jquery - How make two facing each other asp.net -

jquery - How make two <ul> facing each other asp.net -

i want placed list facing each other this

home log in register

i can

home log in register

this code

<div id="wrapper"> <div id="banner"></div> <div id="navigation"> <ul id="nav"> <li style="text-align: left"> <a href="~/default.aspx" runat="server" style="font-weight: 700; text-align: left">home</a> </li> <li> <div class="auto-style1"> <a href="#">reviews</a> </div> <ul> <li style="text-align: left"> <a href="#">books</a> </li> <li style="text-align: left"> <a href="#">book shops</a> </li> <li style="text-align: left"> <a href="#">famous books</a> </li> </ul> </li> <li style="text-align: left"> <a href="#">shop</a> </li> <li style="text-align: left"> <a href="#">about</a> </li> </ul> </div> <div id="content_area"> <asp:contentplaceholder id="contentplaceholder3" runat="server"></asp:contentplaceholder> </div> <div id="sidebar"></div> <div id="footer"> <p>all rights reserved.</p> </div> </div> </div> <div id="log"> <ul id="form_log"> <li style="text-align: right"> <a href="~/default.aspx" runat="server" style="font-weight: 700; text-align: left">log in</a> </li> <li style="text-align: right"> <a href="~/default.aspx" runat="server" style="font-weight: 700; text-align: left">register</a> </li> </ul> </div>

this purely downwards styling of lists , divs. illustration (using floats):

http://jsfiddle.net/trueblueaussie/j8eqrtnk/

ul{ list-style: none; margin: 0; padding: 0; } #wrapper{ float: left; } #log{ float: right; }

this float entire #wrapper div left side of page , #log menu right of page.

another alternative absolutely position menu on top right. allow left , right area overlap when screen gets narrow:

jsfiddle: http://jsfiddle.net/trueblueaussie/j8eqrtnk/1/

ul{ list-style: none; margin: 0; padding: 0; } #log{ position: absolute; top: 5px; right: 10px; }

note html had closing </div> need remove:

</div> </div> <==== remove <div id="log">

jquery css asp.net