title: How can I fill with the color and make it square using CSS?
body: <p>I'd like to fill all the fluid with white colored square.<br>
  As you see the picture, each fluid is filled with white, but it's not complete square.<br>
  I wrapped whole with div class <code>WhiteZone</code>, but it won't make them square.<br>
  How can I make it square?</p>
  
  <p><strong><a href="http://jsfiddle.net/EfwLj/" rel="nofollow noreferrer">LIVE DEMO</a></strong></p>
  
  <p><img src="https://i.stack.imgur.com/xRySA.png" alt="This is not square!"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="WhiteZone"&gt;
      &lt;div class="Box"&gt;
          &lt;div class="Left"&gt;
              abcdefg&lt;br /&gt;
              opqrstu
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Box"&gt;
          &lt;div class="Right"&gt;
              hijklmn
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.WhiteZone{
      color: #000;
      background-color: #fff;
  }
  
  div.Box{
      padding: 0px;
      text-align: center;
      float: left;
  }
  
  div.Left{
      width: 300px;
      padding-top: 5px;
      padding-bottom: 15px;
      text-align: center;
      color: #000;
      background-color: #fff;
      clear: both;
  }
  
  div.Right{
      width: 300px;
      padding-top: 5px;
      text-align: left;
      color: #000;
      background-color: #fff;
      clear: both;
  }
  </code></pre>