title: Canvas dimensions based on outer div measurements (js?)
body: <p>I am having a bit of a layout nightmare. I've been trying for days to fix it on my own but now it's come to this....</p>
  
  <p><a href="http://jsfiddle.net/Osceana/yQ3As/2/" rel="nofollow">http://jsfiddle.net/Osceana/yQ3As/2/</a></p>
  
  <p>I am just trying to get the canvas to span the entire length of that timeline, and I want it to end just above the "All Sites" div, regardless of the window it is moved to. I cannot seem to achieve this though. I've tried in javascript to no avail.</p>
  
  <pre><code>$("#chart").height(
  canvasHeight);
  
  $("#chart").width(
  timelineWidth);
  </code></pre>
  
  <p>P.S. The timeline is supposed to have a left-margin which I implement in js:</p>
  
  <pre><code>$("#timeline").css(
      "margin-left", namesWidth);
  </code></pre>
  
  <p>^ this shows up in MY project, but not here on jsfiddle for some reason. However in my project the left-margin seems to be causing horizontal overflow. I just want that timeline to be moved over enough for the names, then it spans the entire rest of the horizontal length of the screen. I've set the CSS for the width at 100%, 92%, etc., and my results are always strange. Is it because of the left-margin the percentage isn't working? </p>
  
  <h1>timeline CSS:</h1>
  
  <pre><code>    #timeline {
      font-size:15px;
      color:black;
      font-family:Calibri;
      text-align:center;
      margin-top:60px;
      width:100%;
  }
      #timeline td {
      width: 4%;
  }
  </code></pre>
  
  <h1>timeline js:</h1>
  
  <pre><code>var namesWidth = $("#names").width()
  
  $("#timeline").css(
      "margin-left", namesWidth);
  </code></pre>
  
  <p>*Thank you <em>so much</em> for any and all insight. I hope I'm not asking too much.</p>