I'm really struggling with this issue. I have a container with 2 divs inside that I want to stick to the top of the screen. One div contains a menu, while the other has some links. The container needs to be centered above the inner page and have a background width of only 960px. Div1 and Div2 should be inline within the container, with one aligned left and the other right. The challenge is making the whole thing stay sticky at the top.
I've tried several approaches but can't seem to get it right. My current setup is messy and Div2 doesn't stay within its bounds in the container. It moves around and even goes outside the background when the username changes or the window width adjusts.
Below is a simplified version of my code:
<div class="container">
<div id="sticky-top-head">
<div id="block-superfish-1">
<ul id="superfish-1" class="sf-menu">
<li class=""><a href="#">Contribute</a>
<ul class="sf-hidden"><!--li items -->
</ul>
</li>
<li class=""><a href="#">My Lists</a>
<ul class="sf-hidden"><!--li items -->
</ul>
</li>
</ul>
</div>
</div>
<div class="user-logout">
<a id="username" class="sf-right" href="/user">Mattc</a>
<a id="signout" class="sf-right" href="user/logout">Sign Out</a>
</div></div>
CSS:
div#sticky-top-head {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
div#sticky-top-head #block-superfish-1 {
width: 100%;
background: silver;
height: 21px;
color: #eee;
font-size: 12px;
box-shadow: 1px 1px 2px 1px #1e1e1e;
}
.sf-menu li {
background: silver;
}
.user-logout {
position: fixed;
right: 23%;
top: 0;
z-index: 999;
margin-top: 1px;
}
.user-logout a.sf-right {
color: white;
margin-right: 14px;
}
.user-logout a#signout {
position: absolute;
left: 105px;
top: 0;
width: 75px;
}