html - Positioning elements in same navigation bar (left/center/right) -

i'm working on simple navigation bar logo on left, image @ center , links on right.

i want on 1 line, next each other, reason don't manage links on same line rest.

you can see work here. code:

html {    height: 100%;    margin: 0;    padding: 0;  }  body {    height: 100%;    margin: 0;    background-color: #d8d8d8;    color: white;    border: 0;    padding: 0;    font-family: "helvetica neue", arial, helvetica, sans-serif;  }  nav {    background-color: #888888;  }  #links {    height: 30px;    padding: 10px;    margin: 0;  }  #links li {    text-align: center;    margin: 0;    height: 30px;    padding: 0;    padding-left: 10px;    padding-right: 10px;    list-style-type: none;    display: inline;  }  #container {    min-width: 624px;    min-height: 100%;    position: relative;  }  * {    margin: 0;    padding: 0;  }  #links {    overflow: auto;    list-style-type: none;  }  #links li {    height: 25px;    float: right;    margin-right: 0;    border-right: 1px solid #aaa;    padding: 0 20px;  }  #links li:first-child {    border-right: none;  }  #links li {    text-decoration: none;    color: #ccc;    font: 25px/1 helvetica, verdana, sans-serif;    text-transform: uppercase;    transition: 0.5s ease;  }  #links li a:hover {    color: #666;  }  #links li.active {    font-weight: bold;    color: #333;  }  #logo img {    height: 50px;    float: left;    margin-left: 10px;    cursor: pointer;  }  #arrow {    text-align: center;  }  #arrow img {    height: 30px;    margin-top: 10px;    margin-bottom: 10px;    cursor: pointer;  }

<div id="container">    <nav>      <ul id="logo">        <img src="images/logo_tekst.png">      </ul>      <ul id="arrow">        <img src="images/remove-arrow-hi.png">      </ul>      <ul id="links">        <li class="link"><a href="index_pro.html">pro</a>        </li>        <li class="link"><a href="index.html">recreative</a>        </li>      </ul>    </nav>  </div>

the code stripped bare minimum essentials make positioning work, should this:

<div id="container">     <nav>         <img id="logo" src="images/logo_tekst.png" />         <img id="arrow" src="images/remove-arrow-hi.png" />         <ul id="links">             <li> <a href="index_pro.html">pro</a>              </li>             <li> <a href="index.html">recreative</a>              </li>         </ul>     </nav> </div>  nav {     position: relative; } #logo {     float: left; } #links {     float: right; } #links > li {     float: left;     margin-left: 10px; } #arrow {     position: absolute;     left: 50%;     width: 40px;     margin-left: -20px; /* halve width of image */ } 

what did:

1. i fixed html, img can not direct child of ul, li can. no need wrappers anyway, removed them , moved id's image.
2. to make logo on left, floated left
3. to make menu on right, floated right.
4. to center arrow, went bit more creative. positioned absolute (note relative on nav act reference) , set left 50%. causes left edge of image in exact center. moved edge left, setting left margin negative halve width of image. if not know width of image in advance (or if isn't image, sort of dynamic content) can transform: translate(-50%,0) in stead of margin-left same effect.

a demo can found here: http://jsfiddle.net/73ejv2sg/