title: CSS: How to move-up #thumbnails between #header and #content with CSS (no JavaScript,dynamic width and height,not changing HTML)?
body: <p>How to move-up <code>#thumbnails</code> between <code>#header</code> and <code>#content</code> with CSS (no JavaScript), without changing HTML and keeping dynamic width and height for all div tags?<br />
  Code able in <a href="http://jsfiddle.net/laukstein/XdJxu/" rel="nofollow">http://jsfiddle.net/laukstein/XdJxu/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id=container&gt;
      &lt;div id=header&gt;1. header&lt;/div&gt;
      &lt;div id=content&gt;3. content&lt;/div&gt;
      &lt;div id=thumbnails&gt;2. thumbnails&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,body,* html #container{height:100%;}
  html,body{
      margin:0;
      padding:0;
      overflow:inherit;
  }
  #container{
      width:80%;
      min-height:100%;
      margin:0 auto;
      background-color:#ccc;
  }
  #content{
      background-color:#ececec;
  }
  #thumbnails{
      background-color:#ffdc71;
  }
  </code></pre>
  
  <p><strong>Expected result</strong> (cross-browser, dynamic width and height, no JS, no HTML changes):</p>
  
  <pre><code>    1. header
      2. thumbnails
      3. content
  </code></pre>