Matt Campbell Matt Campbell - 3 months ago 8
jQuery Question

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

I cannot figure this out for the life of me. I have 2 divs inside of a container that I am trying to sticky to the top of the screen. 1 div contains a menu, the other div contains a couple of links. The container has to be centered above the inner page and the background can only be 960px, then div1 and div2 should be inline inside that container. One div aligned left and one aligned right. And the whole thing needs to be sticky to the top.

I've come close many times but just can't get it. My current system almost works but is extremely rigged, and div2 won't stay in it's positive within the container. As the username grows or shrinks depending on it's value, or as the window width changes, div2 moves around and outside of the background.

Attached is an example and a wire frame of what's needed. Can anyone help me understand how to mark this up? Here is a whittled down version of what 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

Answer

Why not try something like this instead? It's clean and minimal, yet I think it achieves what you're after quite well. I've added borders and a max-width to aid the example, but would suggest you remove them in your adaptation of course.

.container {
  width: 100%;
  position: fixed;
  border: 1px solid red;
  }

.container .content {
  width: 100%;
  max-width: 500px; /* SET THIS TO WIDTH OF YOUR 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>

Comments