Breaks in ALL versions of IE, but works in Chrome and Mozi.
If I place the <OL> into two divs to make two columns, the numbering sequence of the Ordered List breaks. How do I float them into 2 columns?

Putting an <OL> into 2 colunms using float right and left (not using
css3 columns) breaks the numbering sequence of the <OL> .

e.g.,
column #1 reads: 1, 2, 3,
column #1 reads: 1, 2

If I take the divs out, the sequence returns to normal:

e.g.,
column #1 reads: 1, 2, 3,
column #1 reads: 4, 5




See code below:

Code:
<!DOCTYPE html>
<html>
<head>
       <title>test</title>
               <style type="text/css">
                       ol{list-style-type: default; margin:0; padding:0; background-color:yellow; font-weight:bold; font-size: 125%;}
                       ul{margin:0;padding:0;border:1px solid red; background-color:pink;}
                       ul li{list-style-type: none; margin:0; padding:0; font-weight:normal; font-size:80% !important; line-height: 21px;}
               </style>
</head>
<body>
                       <div style="position:relative; width:720px; margin-right:auto;margin-left:auto;">
                                       <ol>
                                               <div style="float:left; padding-left:40px; width:310px;">
                                               <li>
                                                       Lorem ipsum dolor
                                                               <ul>
                                                                       <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               <li>Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               <li>
                                                       Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               </div>

                                               <div style="float:right; padding-right: 50px; width:310px;">
                                               <li>
                                                       Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               <li>
                                                       Lorem ipsum dolor
                                                       <ul><li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi.</li></ul>
                                               </li>
                                               </div>
                                       </ol>
                               <p class="clear" />
                       </div>
</body>
</html>