title: Drawing responsive Tic Tac Toe board in pure (no JS) HTML & CSS
body: <p>I'm solving HTML layout problem similar to drawing responsive Tic Tac Toe board in HTML + CSS and without any JS. Here is how I define the board's layout:</p>
  
  <pre><code>&lt;div class="board"&gt;
      &lt;div class="lines"&gt;
          &lt;div class="line"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="line"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="line"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="cell-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the corresponding CSS:</p>
  
  <pre><code>.board {
      position: relative;
      height: 100%;
      width: 100%;
      border:1px solid black;
      box-sizing:border-box;
  }
  .board:before {
      content:"";
      display: block;
      padding-top: 100%;
  }
  .lines {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }
  .line {
      width: 100%;
  }
  .cell {
      float: left;
      width: 33.3333%;
      border:1px solid black;
      box-sizing:border-box;
  }
  .cell:before {
      content:"";
      display: block;
      padding-top: 100%;
  }
  .cell-content {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }
  </code></pre>
  
  <p>Here I do not set any sizes besides <code>width: 33.3333%</code>. The height of the board and fields is set using the <a href="http://www.mademyday.de/css-height-equals-width-with-pure-css.html" rel="nofollow">Height equals width with pure CSS</a> approach.</p>
  
  <p>And I would note that almost everything is great. The only problem here: sometimes the sum of widths/heights of board cells are less than the width/height of the board. It means that I can see the gap between last field border and the board border. I can reproduce it with Chrome or FF, but it never happens in IE. Is there a way to fix this?</p>
  
  <p>The demo is available on the <a href="http://jsfiddle.net/_ie_/t8cvqvug/7/" rel="nofollow">jsfiddle (the red line is what I'm trying to get rid of)</a> </p>
  
  <p><strong>UPDATE:</strong> It happens in IE also, not sure why I did not saw it before.</p>