title: How to get two divs inside another div the same height without using fixed height
body: <p>Hello i'm wondering if its not possible to set the right column to the same height like the left column with an image inside. Everything without fixed heights?</p>
  
  <p>fiddle: <a href="http://jsfiddle.net/GWZuq/3/" rel="nofollow noreferrer">http://jsfiddle.net/GWZuq/3/</a></p>
  
  <p><img src="https://i.stack.imgur.com/swltJ.png" alt="enter image description here"></p>
  
  <p>my HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="left_col"&gt;&lt;img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&amp;width=600"&gt;&lt;/div&gt;
      &lt;div class="right_col"&gt;some text ul etc&lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>.wrapper{
      width:80%;
  }
  .left_col{
      position:relative;
      width:80%;
      float:left;
  }
  .left_col img{
      position:relative;
      width:100%;
      height:auto;
  }
  .right_col{
      position:relative;
      width:20%;
      float:left;
      background-color:pink;
      height:100%; /* why is this not putting right col to 100% of the parent container?
  }
  </code></pre>
  
  <p>Thanks a lot!</p>