jquery - Ugh Put 2 divs inline of centered container thats sticky to top -

i cannot figure out life of me. have 2 divs inside of container trying sticky top of screen. 1 div contains menu, other div contains couple of links. container has centered above inner page , background can 960px, div1 , div2 should inline inside container. 1 div aligned left , 1 aligned right. , whole thing needs sticky top.

i've come close many times can't it. current system works extremely rigged, , div2 won't stay in it's positive within container. username grows or shrinks depending on it's value, or window width changes, div2 moves around , outside of background.

attached example , wire frame of what's needed. can me understand how mark up? here whittled down version of i've got.

<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;     } 

wire frame example

why not try instead? it's clean , minimal, yet think achieves you're after quite well. i've added borders , max-width aid example, suggest remove them in adaptation of course.

.container {    width: 100%;    position: fixed;    border: 1px solid red;    }    .container .content {    width: 100%;    max-width: 500px; /* set width of content */    margin: 0 auto;    border: 1px solid blue;    }    .container .content .nav {    float: left;   }    .container .content .logout {    float: right;    }    .clear {    clear: both;    }

<div class="container">     <div class="content">         <div class="nav">navigation goes here</div>         <div class="logout">logout</div>         <div class="clear"></div>     </div>  </div>