Question

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:

<div id="mainContent" style="clear: both;">
  <div id="categoryColumn" >
    <h1 >
      Recipe Categories
      </h1>
      <ul>
        <li>cat1</li>
        <li>cat2</li>
        <li>cat3</li>
      </ul>
  </div>

  <div id="menuColumn">
    <h1>
      Weekly Menus
    </h1>
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
      </ul>
  </div>
</div>

and this CSS

#categoryColumn
{
    background-color: yellow;
  width: 500px;
  float: left;
}

#menuColumn
{
    background-color: red;
  width: 500px;

}

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?

Answer 1

float needs to put on menuColumn as well.