title: Fixed element that pushes back content
body: <p>I a looking for a way to have a fixed element at the top of the page that would change in height according to the page width and that would also push back the content bellow. I've managed something so far but I'm hoping for a much cleaner solution.
  What I did is to have 2 top elements with the same content.
  One is set to position fixed, and the other one to relative, but with no opacity ...</p>
  
  <pre><code>#top-1 { position: fixed; background-color:#fff}
  #top-2 {position: relative; opacity:0;}
  #content { background-color: #FFF; background-color:#CCC }
  </code></pre>
  
  <p>I've set up an example here <a href="http://jsfiddle.net/q3G7F/6/" rel="noreferrer">http://jsfiddle.net/q3G7F/6/</a> 
  Its working exactly how I need it to be, but maybe somebody has a better idea ?<br>
  Thanks, </p>