title: background color not filling entire div
body: <p>I am having a problem in filling the entire center content (<code>div</code>) with a background color.</p>
  
  <p>I want to fill element with id <code>body-content</code> with the blue color but its not actually stretching to full height.</p>
  
  <p><img src="https://i.stack.imgur.com/gj7LS.png" alt="enter image description here"></p>
  
  <p><code>HTML code</code></p>
  
  <pre><code>&lt;div id="body-content"&gt;
  
  &lt;iframe id="promo-video" width="40%" height="315" src="" frameborder="0" allowfullscreen style="margin-bottom: 20px;"&gt;&lt;/iframe&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
      $(document).ready(function(){
      var y_pos = $('#search-panel').position().top;
      $('#promo-video').css('top',y_pos);
      });
      function sho(a){
          if (a=='1'){
              document.getElementById('criteria-1').style.display = "block";
              document.getElementById('criteria-2').style.display = "none";
              document.getElementById('criteria-3').style.display = "none";
          }
          else if (a=='2'){
              document.getElementById('criteria-1').style.display = "none";
              document.getElementById('criteria-2').style.display = "block";
              document.getElementById('criteria-3').style.display = "none";
          }
          else if (a=='3'){
              document.getElementById('criteria-1').style.display = "none";
              document.getElementById('criteria-2').style.display = "none";
              document.getElementById('criteria-3').style.display = "block";
          }
      }
  &lt;/script&gt;
  &lt;div id="search-boxes"&gt;
  
      &lt;div id="search-panel"&gt;
      &lt;form id="search-form" name="search-form" onsubmit="return false;"&gt;
      &lt;fieldset style="margin-bottom:8px;"&gt;
      &lt;legend&gt;&lt;i&gt;Find By&lt;/i&gt;&lt;/legend&gt;
          &lt;input type="radio" name="sp" onclick="sho(1);" checked/&gt;A 
          &lt;input type="radio" name="sp" onclick="sho(2);"/&gt;B
          &lt;input type="radio" name="sp" onclick="sho(3);"/&gt;C
      &lt;/fieldset&gt;
      &lt;p&gt;
              &lt;select name="spe" id="criteria-1"&gt;
                  &lt;option value="g"&gt;G&lt;/option&gt;
                  &lt;option value="c"&gt;C&lt;/option&gt;
                  &lt;option value="ge"&gt;Ge&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="text" style="width:97%;vertical-align:center;display:none;height:24px;padding-left:8px;" placeholder="Or find a.." id="criteria-2"/&gt;
              &lt;input type="text" style="width:97%;vertical-align:center;display:none;height:24px;padding-left:8px;" placeholder="Or find b.." id="criteria-3"/&gt;
      &lt;/p&gt;        
              &lt;select name="city" style="width:49%;"&gt;
                  &lt;option value="any-city"&gt;In City&lt;/option&gt;
                  &lt;option value="mumbai"&gt;Mumbai&lt;/option&gt;
                  &lt;option value="nyc"&gt;New York&lt;/option&gt;
              &lt;/select&gt;
              &lt;select name="locality" style="width:49%;"&gt;
                  &lt;option value="anywhere"&gt;Near Area&lt;/option&gt;
                  &lt;option value="vasant-vihar"&gt;Vasant Vihar&lt;/option&gt;
                  &lt;option value="andheri"&gt;Andheri&lt;/option&gt;
              &lt;/select&gt;
              &lt;br&gt;&lt;br&gt;
          &lt;input type="submit" class="button_g" name="submit-search" value="Search for A"&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- End of Search boxes --&gt;
  
  &lt;/div&gt;&lt;!-- End of body content --&gt;
  </code></pre>
  
  <p><code>CSS code</code></p>
  
  <pre><code>#search-boxes{
      margin: 40px;
      display: inline-block;
      float: right;
      margin-right: 8%;
      clear: both;
      width: 450px;
  }
  
  #search-panel{
      border: 6px solid #c6e7f8;
  }
  #search-panel{
      text-align: center;
      padding: 30px;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 400px;
      background-color: #ffffff;
      font-family: "Segoe UI Semibold", sans-serif;
  }
  
  #search-boxes select{
      width: 100%;
      height: 30px;
  }
  
  #promo-video{
      position: absolute;
      margin-left: 8%;
      border: 6px solid #d9d9d9;
  }
  
  #body-content{
      background-color: #e9f6fc;
  /*  background: linear-gradient(to bottom, #e9f6fc 50%, white);
      background: -webkit-linear-gradient( to bottom, #e9f6fc 50%, white);
      background: -moz-linear-gradient( to bottom, #e9f6fc 50%, white);
      background: -o-linear-gradient( to bottom, #e9f6fc 50%, white);
  */  margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
      padding: 40px;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>I tried searching for the problem and found a solution, that <code>clear</code> should be used to make floating items behave normally. But that too doesn't work. What am I missing?</p>
  
  <p>Another problem was with the linear gradient, I wanted blue to extend till 50% height, but that fills upto 90%, when the blue color fills the entire <code>body-content</code>.</p>