CSS Difficult Column List Problem Why?

Given the following html, use CSS to put the two DIVs in side-by-side columns such that the ordered lists are identical and are properly indented.

Browser compatibility requirements:
IE7
IE6
Firefox 2
Opera 9

The DIV for column 1 is styled inline with a border to increase the difficulty. The second column's contents shouldn't appear within the first column.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Test</title>
    <style>
    </style>
  </head>
  <body>
    <div id="left_col" style="border: solid thin;">
      Ordered List
      <ol>
        <li>Item 1
          <ol>
            <li>Subitem 1
              <ol>
                <li>Sub-subitem 1</li>
              </ol>
            </li>
            <li>Subitem 2</li>
          </ol>
        </li>
        <li>Item 2</li>
      </ol>
    </div>
    <div id="right_col">
      Ordered List
      <ol>
        <li>Item 1
          <ol>
            <li>Subitem 1
              <ol>
                <li>Sub-subitem 1</li>
              </ol>
            </li>
            <li>Subitem 2</li>
          </ol>
        </li>
        <li>Item 2</li>
      </ol>
    </div>
  </body>
</html>