title: How to dynamically position a div under a fixed position div?
body: <p>I've got photo gallery app with a fluid layout. The <code>#header</code> &amp; <code>#controls</code> are set to <code>position:fixed</code> so that when the user scrolls, they stay on the top of the window.</p>
  
  <p>The div that contains all the photos, <code>#people</code>, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.</p>
  
  <p>However, when the window gets smaller, the controls wrap, and <code>#controls</code> gets taller. Consequently, <code>#people</code> then gets partially hidden.</p>
  
  <p>Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.</p>
  
  <p><strong>Update</strong> Here's an example: <a href="http://jsfiddle.net/hbms2/9/" rel="nofollow">http://jsfiddle.net/hbms2/9/</a>.  At the default display, all the blue controls are on one line.  When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.</p>