title: Positioning canvas with jQuery
body: <p>I'm creating an drawing application with HTML5 canvas but is having problems with positioning.</p>
  
  <p>I have a div where I dynamically put the canvas. The div has a top div and a bottom div and I want to place the canvas in the middle. As it is now the canvas overlaps the top div and therefore I want to move it down. I have tried styling the canvas (position: absolut, top: 40) but nothing happens. How can I accomplish this?</p>
  
  <pre class="lang-js prettyprint-override"><code>$('&lt;canvas/&gt;', {
    'id': 'paint',
  }).appendTo('#box');
  
  var theCanvas = document.getElementById('paint');
  theCanvas.width  = 420;
  theCanvas.height = 300;
  </code></pre>
  
  <p>The div looks like this:</p>
  
  <pre><code>-----------------
       top div       
  -----------------
  
  
      canvas
  
  
  -----------------
      bottom div
  -----------------
  </code></pre>
  
  <p>Styling for the divs:</p>
  
  <pre><code>#box {
    position: absolute;
    left:50px;
    top: 60px;  
    margin-left: auto;
    margin-right: auto;
  }
  
  .topDiv {
    position: absolute;
    top: 0;
    height: 60px;
    overflow: hidden;
  }
  
  .bottomDiv {
    position: absolute;
    bottom: 0px;
  }
  </code></pre>
  
  <p>The top div and bottom div is inside #box.</p>