title: how to align vertically an absolute element with a variable height above its parent?
body: <p>I have a CSS layout which is actually like this :</p>
  
  <pre><code>|---------------------|
  |                     |
  |                     |
  |                     |
  |------------|--------| 
  |            |   ***  | &lt; article header
  |   main     |--------| 
  |  content   |        |
  |            |        | 
  |------------|--------|
  </code></pre>
  
  <p>On the right, I have a sidebar with an article element.
  The article has a header with has an absolute position.
  The height of that header is variable and changes across my website.
  What I would like to achieve is to align the header vertically to have this :</p>
  
  <pre><code>|---------------------|
  |                     |
  |            |--------| 
  |            |   ***  | &lt; article header
  |------------|--------| 
  |            |        | 
  |   main     |        | 
  |  content   |        |
  |            |        | 
  |------------|--------|
  </code></pre>
  
  <p>Does anyone know how I can do that ?
  Thanks a lot !</p>
  
  <p>Here's a fiddle : <a href="http://jsfiddle.net/UhT5F/" rel="nofollow">http://jsfiddle.net/UhT5F/</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="inner-content"&gt;
          &lt;div id="main"&gt;&lt;/div&gt;
          &lt;div id="sidebar"&gt;
              &lt;article&gt;
                  &lt;header&gt;article header&lt;/header&gt;
                  &lt;p&gt;article content&lt;/p&gt;
                  &lt;footer&gt;article footer&lt;/footer&gt;
              &lt;/article&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>actual CSS :</p>
  
  <pre><code>#content {
      margin-top: 10em;
  }
  #inner-content{
      max-width: 1140px;
      width: 96%;
      margin: 0 auto;
  }
  #main{
      position: relative;
      float: left;
      border-top:1px solid blue;
      width:65%;
  }
  #sidebar{
      float:right;
      width:33%;
      background-color:#DDD;
      padding:1%;
  }
  #sidebar article{
      position:relative;
  }
  #sidebar article header{
      border-bottom:1px solid blue;
      position:absolute;
      top:0;
  }
  </code></pre>
  
  <p>Thanks a lot !</p>