title: CSS 2 column page with float not working
body: <p>I've read through the many articles here on CSS Float but still can't get my simple example to work.  I'm trying to get 2 columns on my page using this html:</p>
  
  <pre><code>&lt;div id="mainContent" style="clear: both;"&gt;
    &lt;div id="categoryColumn" &gt;
      &lt;h1 &gt;
        Recipe Categories
        &lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;cat1&lt;/li&gt;
          &lt;li&gt;cat2&lt;/li&gt;
          &lt;li&gt;cat3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div id="menuColumn"&gt;
      &lt;h1&gt;
        Weekly Menus
      &lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;menu1&lt;/li&gt;
          &lt;li&gt;menu2&lt;/li&gt;
          &lt;li&gt;menu3&lt;/li&gt;
          &lt;li&gt;menu4&lt;/li&gt;
          &lt;li&gt;menu5&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this CSS</p>
  
  <pre><code>#categoryColumn
  {
      background-color: yellow;
    width: 500px;
    float: left;
  }
  
  #menuColumn
  {
      background-color: red;
    width: 500px;
  
  }
  </code></pre>
  
  <p>I know the divs are being recognized because the colors are correct, but the two lists are appearing on top of each other, not side by side. I want to top column (categoryColumn) on the left, and the bottom one on the right. Am I using the float wrong?</p>