Fixing IE7 weird float behaviour

There are already many IE7 floating questions here.

I have read some of them but still can't find a fix to my problem.

If you view this page in IE8, Firefox and Chrome.

http://pastehtml.com/view/1devx12.html

They all display correctly.

But if you view it in IE7, it looks like this,

http://img713.imageshack.us/i/ietesterie7.jpg/

All labels display on the first line, which is obviously not what is expected.

I would like to avoid adding extra html ma开发者_StackOverflowrkup if possible.

What css should be added to fix the problem?

Many thanks to you all.

Try styling your checkboxes a little differently. Wrap the label around the input - this will keep them together. Also, instead of having them in a DIV, try styling them in an unordered list.

See live demo here (haven't tested in IE -haven't got it installed on Mac- but should work): http://jsfiddle.net/wG7B2/

HTML:

<ul>
    <li>
    <label for="checkbox1"><input id="checkbox1" type="checkbox" value="">Option1</label>
    </li>
    <li><label for="checkbox2"><input id="checkbox2" type="checkbox" value="">Option2</label>
    </li>
    <li><label for="checkbox3"><input id="checkbox3" type="checkbox" value="">Option3</label>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
    margin:0;
}

ul li{
    padding-bottom:10px;
}

ul li:last-child{
    padding-bottom:0px;
}

ul li input{
    margin-right:5px;
}