title: CSS - fluid 3 column layout with float
body: <p>I'm a newbie in CSS and I'm trying to apply the 3 column layout to <a href="http://csszengarden.com/" rel="nofollow">CSS garden's html</a>. Below is how I do it:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="pageHeader"&gt;Hello&lt;/div&gt;
      &lt;div id="quickSummary"&gt;Hello 1&lt;/div&gt;
      &lt;div id="preamble"&gt;Hello 2&lt;/div&gt;
      &lt;div id="explanation"&gt;Hello 3&lt;/div&gt;
      &lt;div id="link"&gt;List&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#pageHeader, #quickSummary
  {
      float: left;
      clear: left;
  }
  #preamble, #explanation
  {
      margin-left: 100px;
      margin-right: 100px;
  }
  #link
  {
      float: right;
  }
  </code></pre>
  
  <p>Then the result turns out that the 3rd column is put under the remaining two columns and I don't know how to "push it up".</p>
  
  <p>I've tried it with Fiddle <a href="http://jsfiddle.net/BCJ6C/56/" rel="nofollow">here</a>. Please help me out and thanks. </p>
  
  <p>Edit: I forgot to mention that I'm not supposed to change the structure of the HTML file. Thank you.</p>