title: Aligning 4 divs side by side with percentage dimensions in a parent div
body: <p>how can I achieve this?</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="inset"&gt;
      &lt;div class="innerWrapper"&gt;
          &lt;div class="uncollapse"&gt;
          &lt;/div&gt;
          &lt;div class="featuredbox"&gt;
          &lt;div class="rank"&gt;&lt;/div&gt;
          &lt;div class="banner"&gt;&lt;/div&gt;
          &lt;div class="desc"&gt;&lt;/div&gt;
          &lt;div class="votes"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>@charset "utf-8";
  
  .featuredbox {
      background-color: #f8f8f8;
      height: 160px;
      width: 100%;
      border: 1px solid #d5d5d5;
      margin-top: 10px;
      -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8;
      box-shadow: 0px 0px 4px 1px #d8d8d8;
      padding-top: 15px;
      padding-bottom: 10px;
  }
  
  .featuredbox .rank {
      color: #8f8f8f;
      width: 10%;
      height: 100%;
  }
  
  .featuredbox .banner {
      width: 80%;
      height: 50%;
  }
  
  .featuredbox .desc {
      width: 80%;
      height: 50%;
  }
  
  .featuredbox .votes {
      width: 10%;
      height: 100%;
  }
  </code></pre>
  
  <p><a href="http://puu.sh/49szH.png" rel="nofollow noreferrer">What it should look like http://puu.sh/49szH.png</a></p>
  
  <p>How can I do to make them align in the particular format without using fixed values?</p>
  
  <p>Thank you!</p>
  
  <p>It's asking me to put more details, but I don't have any more to give :(</p>