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

Question

I'm working on a simple navigation bar with a logo on the left, an image at the center and some links on the right.
I want this all to be on one line, next to each other, but for some reason I don't manage to get the links on the same line as the rest.
You can see my work here. This is the 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 a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
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">Pro
</li>
<li class="link">Recreative
</li>
</ul>
</nav>
</div>

Answer 1

The code stripped to the bare minimum with just the essentials to make the positioning work, should look something like 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> Pro
</li>
<li> Recreative
</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 the width of the image */
}
What i did:
I fixed your html, img can not be a direct child of ul, only li can. No need for any extra wrappers anyway, so I just removed them and moved the id's to the image.
to make your logo be always on the left, I just floated it left
to make your menu be always on the right, I just floated it right.
to center that arrow, I went a bit more creative. I positioned it absolute (note the relative on the nav so it will act as the reference) and set the left to 50%. This causes the left edge of the image to be in the exact center. I then moved that edge to the left, by setting the left margin to negative halve the width of the image. If you do not know the width of the image in advance (or if it isn't an image, but some sort of dynamic content) you can also do transform: translate(-50%,0) in stead of the margin-left to get the same effect.
A demo can be found here: http://jsfiddle.net/73ejv2sg/

Answer 2

The problem you have is you only float your logo. You need to float all elements and add padding or width to align. Also add height to nav to display the background.
Per your comments position absolute and set the left:
#arrow {
position:absolute;
left:45%;
}
Here I just set 45% but you could use JavaScript to easily grab the width of the screen and image width and force it to the center every time.
$(document).ready(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
});
$(window).resize(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
}
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;
height:55px;
}
#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;
float:right;
}
#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 a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height:50px;
float:left;
margin-left:10px;
cursor:pointer;
}
#arrow {
position:absolute;
left:45%;
}
#arrow img {
height:30px;
margin-top: 10px;
margin-bottom: 10px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">Pro</li>
<li class="link">Recreative</li>
</ul>
</nav>
</div>