How can I position an element relative to a fixed element? [closed]

Question

I have this: http://jsfiddle.net/WEyM9/

How do I position my .content div relative to the .header div (so that it doesn't go behind the header)? Is something like this possible without setting a fixed margin-top on .content ?

Answer 1

You will need an extra wrapper:

.wrapper {
  width: 400px;
  position: relative;
  height: 80px;
}

.header {
  width: 400px;
  background-color: green;
  height: inherit;
  position: fixed;
}

.content {
  width: 400px;
  background-color: magenta;
  height: 400px;
}

<div class="wrapper">
  <div class="header">
    header
  </div>
</div>

<div class="content">
  content
</div>