title: Can't change div height to percent
body: <p>I am trying to make a responsive div, but for some reason, changing the height to percent just ignores the height. I can only add a fix height.</p>
  
  <p>The div I want to change in the example below is the mainContainer</p>
  
  <pre><code>html, body{
      width:100%;
      height: 100%;
  }
  .mainContainer{
      width:150%;
      height:550px; /*I want this to be 60% or something*/
      padding:10px;
      background-color:#080808;
      border-radius:5px;
  }
  .textContainer{ 
      width:55%;
      height:100%;
      float: left;
      background-color:#666666;
      border-radius:10px 0 0 10px;  /*TL TR BR BL*/
  }
  #map1 {
      width: 45%;
      height: 100%;
      margin-top:-15px;
      float:right;
      display:inline;
      border-radius:0 15px 15px 0;  /*TL TR BR BL*/
  }
  .contentBox{
      width:96%;
      height:100%;
      color:#F2F2F2;
      font-size:100%;
      padding-right:3%;
      padding-left:3%;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }
  
  
  &lt;section class="mainContainer"&gt;
          &lt;div class="textContainer"&gt;
              &lt;div class="intro"&gt; 
                  &lt;div class="contentBox"&gt;
                               &lt;/div&gt;
                        &lt;/div&gt;
              &lt;/div&gt;
             &lt;div id="map1"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>