title: CSS page layout, keep text in its own div column
body: <p>I have a page layout with two div. They are both float:left and so appear as columns next to each other. I want them to stay that way. However, if the text in the right-most div is too long then the whole text moves down below the left most column. This also happens if the text is short, but I make the browser window smaller. What I want is for the long text to take up more lines, but only within its own right column.</p>
  
  <p>CSS:</p>
  
  <pre><code>.left{float:left}
  .right{float:left}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class = "left"&gt;
           &lt;span&gt;some text&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class = "right"&gt;
          &lt;span&gt;some long text....&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit: Also, the left column should stay fixed.</p>