title: HTML5/CSS3 make a square div, width is 100%, need height equals width
body: <p>I am using HTML5 and CSS3 to make a layout.</p>
  
  <p>I need tiles on the page, which is a square div element. the tile is inside a bootstrap column, I need the width to be automatically match the column width, but I found it difficult to let the height = width, because width is a percentage value: 100%.</p>
  
  <p>HTML:</p>
  
  <pre><code>...
  &lt;div class="col-md-2"&gt;
      &lt;div class="tile tile-square tile-auto"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tile-square{
      width: 100%;
      height: how to do this?
  }
  </code></pre>
  
  <p>I am OK with jQuery/js solution, but I prefer using CSS3 to solve this alone. there is a "calc()" statement in CSS3, but I do not know if it can achive this functionality.</p>