CSS width as percentage not displaying properly in IE7

I am trying to align my checkboxes on the following page into 3 columns. There are several different versions of this page and each one may开发者_StackOverflow中文版 have more or less checkboxes. The boxes align perfectly in Firefox and other browsers, but not in IE7. The CSS I am using is included below. Can someone help me figure out a fix for IE7? I am using the Better Exposed Filters for Drupal to produce the text boxes.

http://www.zambux.com/coupons/services

.bef-select-as-checkboxes .form-item {  
  width: 50%;  
  float: left;  
}  

I am using FF4 and it doesn't look right your page.

• First of all you have ".form-checkboxes" as 100px widh, change that on something wider or more flexible (otherwise always your elements will wrap badly)
• You cannot align things in 3 columns by using width:50% , because you are defining HALF of the space to be occupied by .form.item you would like to use 33% , but I suggest to do 30% and add 2% margin-right to keep a little bit of gap between the elements

I would do something like that as structure

<div class="container clearfix">
   <label for="input1">
     <input type="text" id="input1" />
     <span>my text</span>
   </label>
   <label for="input2">
     <input type="text" id="input2" />
     <span>my text</span>
   </label>
   <label for="input3">
     <input type="text" id="input3" />
     <span>my text</span>
   </label>
</div>

and add as CSS

#container label{width:30%; margin-right:2%; float:left;}
.clearfix:after { /*This is for clearing your floating elements*/
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}