I'm facing an issue with my fixed div. I'd like to align my logo to the right, so it appears centered, and have my navigation links on the left. However, when I resize my browser window, the links overlap the logo, and vice versa.
Is there a way to keep the position of my logo and links consistent when resizing? Can they move together as I adjust the window size?
<div id="container">
<div id="nav"> <div>
<spanl>
<a href="index.html"> LOGO IMAGE </a>
</spanl>
</div>
<div>
<spantr>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Merchandise</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</spantr>
</div>
#nav {
position:fixed;
left:0px;
top:0px;
height:55px;
width:100%;
background:#999;
}
#container div spanl{
position:absolute;
top:0px;
left:500px;;
padding: 1em;
}
#container div spanr{
position:absolute;
top:0px;
right:500px;
padding: 1em;
margin-left: auto;
margin-right: auto;
}
ul {
overflow: visible;
list-style-type: none;
}
li {
height: 15px;
float: left;
margin-right: 0px;
margin-top: -10px;
border-right: 1px solid #aaa;
padding: 0 10px;
}
li:last-child {
border-right: none;
}