title: css div within div square alignment issue
body: <p>I am trying to create a square of 6 * 6 input box in a html page. In order to position them, I use divs and css:</p>
  
  <pre><code>&lt;div class="boxes"&gt;
      &lt;div class="box_0_0"&gt;&lt;input... &gt;&lt;/div&gt;
      &lt;div class="box_0_1"&gt;&lt;input... &gt;&lt;/div&gt;
      &lt;div class="box_0_2"&gt;&lt;input... &gt;&lt;/div&gt;
      &lt;div class="box_0_3"&gt;&lt;input... &gt;&lt;/div&gt;
      ...
      &lt;div class="box_1_0"&gt;&lt;input... &gt;&lt;/div&gt;
      &lt;div class="box_1_1"&gt;&lt;input... &gt;&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>where</p>
  
  <pre><code>.boxes { position: relative; }
  
  .box_0_0 { position: relative; float: left; top: 0px; left: 0px; width: 40px; height: 50px; }
  .box_0_1 { position: relative; float: left; top: 0px; left: 50px; width: 40px; height: 50px; }
  ...
  
  .box_1_0 { position: relative; float: left; top: 60px; left: 0px; width: 40px; height: 50px; }
  .box_1_1 { position: relative; float: left; top: 60px; left: 50px; width: 40px; height: 50px; }
  </code></pre>
  
  <p>but the result is not a square alignment:</p>
  
  <p><img src="https://i.stack.imgur.com/wYisd.jpg" alt="enter image description here"></p>
  
  <p>How can I achieve this?</p>