title: css squares - on resize
body: <p>I want to built a website with with 6 squares.
  3 in the first row and 3 squares in second row 2.
  If I resize my window this squares must be larger and always adapt themselves to 100%.</p>
  <p>The squares must show <a href="http://www.bildupload.com/index.php?image=21f940ea9e7d88dcf7d3779c307524c3" rel="nofollow noreferrer">like this</a>.</p>
  <p>I have tried this:</p>
  <pre><code>.sq {
      float:left;
      display:block;
      height:96px;
      width:33%;
      background-color:#007CC1;
      margin:0 2px 2px 0;
  }
  
  &lt;a class=&quot;sq&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;sq&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;sq&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
  &lt;a class=&quot;sq&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;sq&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;sq&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
  &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>but I don't know how to calculate the height.</p>
  <p>How can I do it? Do you have an idea?</p>