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

I want my list to look like one another

  register About Home Log In  

I can do it only like this

  About Login Register  

This is my code

  & lt; Div id = "wrapper" & gt; & Lt; Div id = "banner" & gt; & Lt; / Div & gt; & Lt; Div id = "navigation" & gt; & Lt; Ul id = "nav" & gt; & Lt; Li style = "text-align: left" & gt; & Lt; A href = "~ / default.aspx" runat = "server" style = "font-weight: 700; text-align: left" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "auto-style1" & gt; & Lt; A href = "#" & gt; Reviews & lt; / A & gt; & Lt; / Div & gt; & Lt; Ul & gt; & Lt; Li style = "text-align: left" & gt; & Lt; A href = "#" & gt; Books & lt; / A & gt; & Lt; / Li & gt; & Lt; Li style = "text-align: left" & gt; & Lt; A href = "#" & gt; Book shops & lt; / A & gt; & Lt; / Li & gt; & Lt; Li style = "text-align: left" & gt; & Lt; A href = "#" & gt; Famous Books & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li style = "text-align: left" & gt; & Lt; A href = "#" & gt; Shop & lt; / A & gt; & Lt; / Li & gt; & Lt; Li style = "text-align: left" & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "content_area" & gt; & Lt; Asp: ContentPlaceHolder ID = "ContentPlaceHolder3" runat = "server" & gt; & Lt; / Asp: ContentPlaceHolder & gt; & Lt; / Div & gt; & Lt; Div id = "sidebar" & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; P & gt; All rights reserved. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "log" & gt; & Lt; Ul id = "form_log" & gt; & Lt; Li style = "text-align: right" & gt; & Lt; A href = "~ / default.aspx" runat = "server" style = "font-weight: 700; text-align: left" & gt; Sign in & lt; / A & gt; & Lt; / Li & gt; & Lt; Li style = "text-align: right" & gt; & Lt; A href = "~ / default.aspx" runat = "server" style = "font-weight: 700; text-align: left" & gt; Register & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

This is purely under the list and style of divs as an example (Using floats):

  ul {list-style: none; Margin: 0; Padding: 0; } #wrapper {float: left; } # Logs {float: true; }  

This will bring the entire #wrapper div to the left of the page and to the right of the #log menu.

Another option would be to position the menu at the top right. Although the left and right areas will be allowed to overlap, when the screen will be very narrow:

JSFiddle:

  ul {list-style: none; Margin: 0; Padding: 0; } # Log {status: absolute; Top: 5px; Correct: 10px; }  

Note that your HTML has an extra off and gt; needs to be removed:

  & lt; / Div & gt; & Lt; / Div & gt; & Lt; ==== remove it & lt; Div id = "log" & gt;