31978002.md

I'm trying to create a page with a fixed div above the main div. The main div should be below the fixed div but instead it overlaps the fixed div.

Adding margin-top positions the main div below the fixed div but, it also clips the same amount off of the bottom of the page.

What am I doing wrong?

Live Demo

body {
  background-color: #00FFFF;
}
.fixed {
  width: 100%;
  position: fixed; 
  background-color: #C0C0C0;
}
.main {
  background-color: #FFFFFF;
}
.expand {
  height: 800px;
}

<div class="fixed">
  fixed div line 1<br />
  fixed div line 2<br />
  fixed div line 3<br />
</div>
<div class="main">
  <div class="expand"></div> <!-- For demo purposes only -->
</div>