title: How to set 50% height on a child div of an auto height div?
body: <p>I want to set up a block made of 3 cells:</p>
  
  <p><img src="https://i.stack.imgur.com/1xPDv.png" alt="This is how I want to set it up"></p>
  
  <p>The parent div is set to 100% width, the two columns are 50% width. The content needs to expand/shrink with the page as it will be a responsive page.
  Since I don't know the height of the parent div, I can only set the rows on the right a percentage height, but 50% is not valid with an auto height parent.
  How Can I achive to have the upper and lover half 50% of the height of the parent div?
  The image's aspect ratio will always be 1:1</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="column blue"&gt;&lt;img src="square.png"&gt;&lt;/div&gt;&lt;!--
  --&gt;&lt;div class="column yellow"&gt;&lt;!--
      --&gt;&lt;div class="row green"&gt;Upper half&lt;/div&gt;&lt;!--
      --&gt;&lt;div class="row red"&gt;Lower half&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS </p>
  
  <pre><code>body {
      margin 0;
      padding 0;
  }
  .container {
      width: 100%;
      display: inline-block;
      padding: 0;
      margin: 0;
  }
  img {
      width: 100%;
      padding 0;
      margin 0;
      border: none;
  }
  .column {
      width: 50%;
      padding: 0;
      margin: 0;
      display: inline-block;
      vertical-align: top;
  }
  .row {
      width: 100%;
      height: 50%;
      padding: 0;
      margin: 0;
      vertical-align: top;
      display: inline-block;
  }
  .red {
      background-color: red;
  }
  .green {
      background-color: green;
  }
  .blue {
      background-color: blue;
  }
  .yellow {
      background-color: yellow;
  }
  </code></pre>
  
  <p>Here's my code so far: <a href="http://jsfiddle.net/7y9eK/" rel="nofollow noreferrer">http://jsfiddle.net/7y9eK/</a></p>