Question

I’m trying to put a floating menu on my site, which is centred in the browser.

I’ve made the static div “position:fixed” and set “left:0”. I want the gap between the static div and the rest of the scrolling content to remain constant. I’ve tried wrapping both div’s in a parent div that is centre aligned, but this didn’t work.

Do you have any idea how to accomplish this?

Answer 1

I think this is what you want… The fixed div is just fixed position as you’d expect. The scrolling has a left margin to push it away from the fixed one by a set amount (change this to change the gap). Then there is a wrapper div that is centered as you stated in the question that holds it all together in the middle of the page.

DEMO

HTML

<div id="wrap">
  <div id="fix">test</div>
  <div id="scr">test<br /></div>
</div>

CSS

#wrap {
  width: 500px;
  background-color:#F00;
  margin: 0 auto;
}
#fix {
  border: 1px solid #ccc;
  height: 100px;
  width: 200px;
  position: fixed;
}

#scr {
  border: 1px solid #000;
  margin-left: 220px;
  position: relative;
}