title: resizable, fixed position element; responsive, relatively positioned content
body: <p>I have a fixed div <code>#summary</code> which changes height. It needs to always show at the top of the window. Below it I have content <code>#catalogueContainer</code> which i need to re-position when the fixed div above changes height. I need to be able to scroll through using the window scroll bar.</p>
  
  <p>I understand the only way to keep the <code>#summary</code> div at the top of the window is to give it a fixed position. When doing this, <code>#catalogueContainer</code> has no relationship to it and so i can't re-position using CSS when <code>#summary</code> changes height. The only way i can think is to have some javascript which listens for the re-size of summary and specifies the top position of the <code>#catalogue</code>.</p>
  
  <ol>
  <li>Does this sound the most efficient solution? Code and notes below.</li>
  <li>In Chrome, when i scroll through the window, the background image of #summary is left behind, but all the other content stays fixed to the top of my browser window as i scroll. </li>
  </ol>
  
  <p>Any suggestions on fixing this?</p>
  
  <pre><code>#summary {
      position:fixed;
      top:0px;
      left:275px;
  }
  </code></pre>
  
  <p><code>#summary</code> has re-sizable elements within, and changes height. This needs to always show at the top of the window.    </p>
  
  <pre><code>#right {
      position:relative;
      left:275px;
      top:300px;
  }
  </code></pre>
  
  <p><code>#right</code> is the container element for all the below.</p>
  
  <p>There are numerous catalogs in the <code>#catalogueContainer</code>, all in the same place, but only one is visible at a time.</p>
  
  <pre><code>#catalogueOne {
      position:relative;
  }
  </code></pre>
  
  <p><code>#catalogueOne</code> needs to be <code>relative</code> because there are <code>position:absolute</code> elements inside</p>