Question

I’ve got a fixed position sidebar:

.sidebar {
  position: fixed;
  top: 51px;
  left: 50%;
  min-height: 100%;
  width: 225px;
  margin-left: -470px;
  padding-top: 24px;
  background: url('images/side-bg.jpg') no-repeat;
  overflow: hidden;
  z-index: 20;
}

within a margin: 0 auto;‘d container:

#outside_container {
  position: relative;
  min-height: 100%;
  width: 1022px;
  margin: 0 auto;
}

So far the left:50%; trick with a negative left margin is working well to center it with the rest of the site. However, when the browser window size is reduced to narrower than the site width, the nav scurries off to the left until you can’t see it anymore. Try it here: http://ravictilanding.cbstage.com/

What can I do to stop this behavior while nonetheless keeping it fixed at normal widths?

Answer 1

Why does the sidebar need to be left: 50%, margin: -0.5width? You are not centering the sidebar itself, only the container div and that is taken care of by the margin: 0 auto. Unless I’ve missed something, you could simply not define left and apply a positive margin-left to push it in from the edge of #outsidecontainer. This works and doesn’t appear to break anything in Chrome but I haven’t looked at other browsers.