title: Position div under absolute picture with dynamic height
body: <p>My problem is positioning a div under a "dynamic picture" and having dynamic content under the div positioned under the dynamic picture: </p>
  
  <p><a href="http://jsfiddle.net/rDqny" rel="nofollow noreferrer">Link to the jsfiddle</a></p>
  
  <p>jsfiddle css classes ready to be filled in : </p>
  
  <ol>
  <li>.belowPicture </li>
  <li>.belowBelowPicture </li>
  </ol>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="wallDetailContent"&gt;     
    &lt;section id="wallDetailMessage" style="width 100%"&gt; 
       &lt;img class="wallDetailPicture" src="http://web.scott.k12.va.us/martha2/dmbtest.gif"&gt;
       &lt;div style="max-width:70%;"&gt;blah gik sig en tur, og købte blah med hjem&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="belowPicture"&gt;
      &lt;p class="wallByDate"&gt; 20140126220550&lt;/p&gt; 
      &lt;p class="wallByBy"&gt; af &amp;nbsp; &lt;/p&gt;
      &lt;p class="wallByName"&gt; Anders  &lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="belowBelowPicture"&gt;
        content (should be dynamic, able to fill all the height it need downwards.)
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.wallDetailPicture{
      top: 5px;
      right : 5px;
      position: absolute;
      display:box;
      width:auto;
      height:auto;
      max-width:30%;
      max-height: 200px;
  }
  .wallByName{
      font-weight: bold !important; 
      color: blue;
      display:inline-block !important;
  }
  .wallByDate{
      font-weight: bold !important; 
      display:inline-block !important;
  }
  .wallByBy{
      display:inline-block !important;
  }
  .belowPicture{
       background:red;
  }
  .belowBelowPicture{
      background:green;
  
  }
  </code></pre>
  
  <p>Goal look:
  <img src="https://i.stack.imgur.com/EJc76.png" alt="image of the goal"></p>