title: Issue with divs stacking beside each other
body: <p>I'm having some issues with aligning 3 divs beside each other.</p>
  
  <p><a href="http://jsfiddle.net/Lpprn/" rel="nofollow">http://jsfiddle.net/Lpprn/</a></p>
  
  <p>I have a strong feeling it's in the syntax, but I can't for the life of me figure it out.</p>
  
  <pre><code>#story-container {
      width: 700px;
      padding: 0px;
      margin: 0 auto;
  }
  #story-left {
      width: 300px;
      padding: 10px;
      padding-right: 0px;
      float: left;
      text-align: right;
      margin: 0;
      background-color: #000000;
  }
  #story-center {
      width: 100px;
      float: left;
      margin: 0;
      background-color: #ffffff;    
  }
  #story-right {
      width: 300px;
      padding: 10px;
      padding-left: 0px;
      float: left;
      text-align: left;
      margin: 0;
      background-color: #808080;
  
  }
  </code></pre>
  
  <p>Thanks for your help!</p>