title: Creating a "div sandwich" with fixed-height bread slice divs and an expandable meat div
body: <p>So I have a div sandwich: three divs on top of one another. The slices of bread are both fixed-height due to background images. The meat is a 1px tall vertical repeater image. I need a way to expand the meat when overflow content from the top breadslice hits the bottom of the bottom breadslice. I figured a wrapper would be necessary for the meat and the bottom bread, but I'm not sure how to implement it.</p>
  
  <p>Here's what I have thus far.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          #top {
              position:relative;
              height:100px;
              background-color:pink;
              width:460px;
              word-wrap:break-word;
          }
          #wrapper {
              position:relative;
          }
          #expand {
              min-height:100%;
              height:auto;
              background-color:#EEEFFF;
          }
          #bottom {
              height:100px;
              background-color:#EEEEEE;
          }
          div.clear{
              position:absolute;
              width:100%;
              clear:both;
              height:1px;
              overflow:hidden;
              border:solid orange;
          }
      &lt;/style&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="top"&gt;
          a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a&lt;br/&gt;a
      &lt;/div&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="expand"&gt;&lt;/div&gt;
          &lt;div id="bottom"&gt;&lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I need a way to make top's content hit against the "clear" in the bottom wrapper and move the wrapper down.</p>