CODEWITHSUNDEEP
htmlcss
GT22
GT22

Reputation: 503

Position fixed DIV relative to a scrolling DIV?

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

scroller

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?

Upvotes: 2

Views: 1283

Answers (3)

Jay
Jay

Reputation: 19857

Alright so I'm late to the party, but you can just style the body tag like so:

body {
    margin-left: 200px;
}

jsFiddle example

Upvotes: 1

sachleen
sachleen

Reputation: 31131

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

Upvotes: 3

Kolyunya
Kolyunya

Reputation: 6240

Since you said nothing about widths of divs and their positioning, I can suggest a very easy solution: static div must have a fixed width and a scrolling one - margin-left equal to width of static plus some value (gap width)

div#static
{
   width: 200px;
   ...
}


div#scrolling
{
   margin-left:180px;
   ...
}

The gap will have a constant value of 20px

Upvotes: 0

Related Questions