title: CSS position a div based on dynamic height of another div
body: <p>In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.</p>
  
  <p><a href="https://jsfiddle.net/z77fwaj7/1/" rel="nofollow">https://jsfiddle.net/z77fwaj7/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#Header
  {
      background-color: gray;
      height: 50px;
  }
  #Banner
  {
      background-color: orange;
      height: 50px;
  }
  #Content
  {
      background-color:white;
      border:1px solid red;
      max-width:500px;
      margin:0px auto;
  }
  #LeftColumn
  {
      float:left;
      height:200px;
      width:25%;
      background-color: blue;
      margin-top:-51px;/*this needs to be dynamic*/
  }
  #MiddleColumn
  {
      float:left;
      height:200px;
      width:45%;
      background-color: yellow;
  }
  #RightColumn
  {
      float:left;
      height:250px;
      width:30%;
      background-color: green;
  }
  #Footer
  {
      background-color: gray;
      height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Header"&gt;header&lt;/div&gt;
  &lt;div id="Banner"&gt;banner&lt;/div&gt;
  &lt;div id="Content"&gt;
      &lt;div id="LeftColumn"&gt;left&lt;/div&gt;
      &lt;div id="MiddleColumn"&gt;middle&lt;/div&gt;
      &lt;div id="RightColumn"&gt;right&lt;/div&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="Footer"&gt;footer&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>