title: CSS layout problems using float with canvas
body: <p>I am trying to get a specific layout working and am having issues. The layout I want is two canvases, stacked on top of each other and aligned to the left, with two divs also stacked on top of each other and aligned horizontally next to and to the right of the stacked canvases. To do this I have 2 div containers, one for the stacked canvases and one for the stacked divs. These 2 containers are floated left.</p>
  
  <p>What I expect to see is this:</p>
  
  <pre><code>+------------+--------+
  | canvas     | div    |
  |            +--------+
  +------------+ div    |
  | canvas     +--------+
  |            |
  +------------+
  </code></pre>
  
  <p>The problem I am having is that the stacked divs move below the stacked canvases. Aditionally, the container that holds the canvases is stretched to the right edge, filling the area to the right of the canvases where I expected the stacked divs to appear. This is even though there is plenty of room for the stacked divs to the right of the canvases.</p>
  
  <p>What I am actually getting is this:</p>
  
  <pre><code>+------------+ - - - - - - +
  | canvas     | canvas      |
  |            | container   
  +------------+             |
  | canvas     |             
  |            |             |
  +--------+---+ - - - - - - +
  | div    |
  +--------+
  | div    |
  +--------+
  </code></pre>
  
  <p>If I change the canvases to divs then I get exactly what I want and expected (except without the canvases)! So, this leads me to ask, what is different about canvas elements that makes my layout fail? Is there special considerations for laying out canvas elements? Do canvases need to be treated differently when in an element that is floated? Example markup/css is below:</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="canvases" style="background: yellow"&gt;
  &lt;!--
              &lt;div class="myCanvas" style="background: #606060"&gt;&lt;/div&gt;
              &lt;div class="myCanvas" style="background: #808080"&gt;&lt;/div&gt;
  --&gt;
              &lt;canvas class="myCanvas" style="background: #606060"&gt;&lt;/canvas&gt;
              &lt;canvas class="myCanvas" style="background: #808080"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="numbers" style="background: red"&gt;
              &lt;div class="pValue" style="background: #606060"&gt;1234&lt;/div&gt;
              &lt;div class="pValue" style="background: #808080"&gt;4321&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>body
  {
      background: black;
  }
  
  .canvases
  {
      float: left;
  }
  
  .myCanvas
  {
      width: 200px;
      height: 100px;
  }
  
  .numbers
  {
      float: left;
      width: 100px;
  }
  
  .pValue
  {
      border: 2px solid #a0a0a0;
      border-radius: 10px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-align: center;
      font: bold 28pt Calibri;
  }
  </code></pre>
  
  <p>If you'd like to try this simply switch the canvases with divs in the HTML (they are commented out) to see how divs work in place of the canvases. Thanks for any help you may have.</p>