Create two columns of dynamic lists sorted vertically (IE7 Float problem)

I am wondering what the best way to create two columns of dynamic lists would be?

I have been able to create two columns of lists sorted vertically with column 1 being floated to the left and column 2 starting at the top level with column 1. However in IE7, it doesn't seem to like the float and ends up starting on the same line as the last line of column 1 but off to the right where it should be. IE8 seems to be working fine. The <li> entries are created in python code and placed in the开发者_StackOverflow <ul> using innerHTML and ajax. Each item has a class to define whether it is in column 1 or column 2.

This is what I am trying to accomplish.

     A     E
     B     F
     C     G
     D     H

IE7 renders this way when using float:

     A
     B
     C
     D     E
           F
           G
           H

Is there a fix for this, or should I be looking at reworking what I have to use tables? Seems a bit much just to get IE7 to work, but I may not have a choice.

Thanks

UPDATE:

This piece is replaced dynamically.

<div class="location-wrapper">
    <ul name="location" id="id_location" style="list-style: none;"></ul>
</div>

With this:

<div class="location-wrapper">
    <ul style="list-style-type: none; list-style-image: none; list-style-position: outside;" id="id_location" name="location">
        <li class="opt_column1"><input type="checkbox" value="20" id="Arbour Lake" name="community_item">Arbour Lake - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="12" id="Brentwood" name="community_item">Brentwood - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="17" id="Citadel" name="community_item">Citadel - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="19" id="Country Hills Village" name="community_item">Country Hills Village - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="13" id="Crowfoot" name="community_item">Crowfoot - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="18" id="Downtown East Village" name="community_item">Downtown East Village - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="11" id="Edgemont" name="community_item">Edgemont - (0)</li>
        <li class="opt_column1"><input type="checkbox" value="14" id="Hamptons" name="community_item">Hamptons - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="9" id="Hawkwood" name="community_item">Hawkwood - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="3" id="Royal Oak" name="community_item">Royal Oak - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="2" id="Scenic Acres" name="community_item">Scenic Acres - (1)</li>
        <li class="opt_column2"><input type="checkbox" value="10" id="Silver Springs" name="community_item">Silver Springs - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="1" id="Tuscany" name="community_item">Tuscany - (1)</li>
        <li class="opt_column2"><input type="checkbox" value="15" id="Varsity" name="community_item">Varsity - (0)</li>
        <li class="opt_column2"><input type="checkbox" value="21" id="Varsity Estates" name="community_item">Varsity Estates - (0)</li>
        <br>
    </ul>
</div>

My CSS:

.location-wrapper {
margin:0;
width:42em;
}
.location-wrapper ul {
display:inline-block;
margin:0;
padding:0;
}
li.opt_column1 {
float:left;
width:22em;
}
li.opt_column2 {
margin-left:22em;
}

---

I can't find a quick solution to fix this behaviour in IE7 (it does work in IE8 and above, FF and Chrome) but you could just split the <ul> element into two and float the first one. That should work in every browser that knows the float attribute.

---

Try this

.location-wrapper {
    margin:0;
    width:42em;
}
.location-wrapper ul {
    display:inline-block;
    margin:0;
    padding:0;
}
.location-wrapper ul li{
   position:relative;/* IE needs this in order to recognize content in all columns*/
}
li.opt_column1 {
    float:left;
    width:22em;
}
li.opt_column2 {
    margin-left:22em;
}