Internet Explorer 7 floated list element

Question

I have been searching over the internet for the past few hours looking for a solution to this problem and have been unable to find anything, although a few similiar issues, none appear to be the same as this.

I have a list, which contains 2 span elements. I wish the first span element to float to the left, and the second to float to the right.

In all browsers besides IE 7, which makes has the the right element appearing on the next line.

like so :

LEFT

LEFT RIGHT

LEFT RIGHT

  RIGHT - (this is not meant to be in a code block, unsure how to remove it)

(there is more then 3 elements, but that is a general example - the page with the issue is located at : http://www.blisshair.com.au/testing/ )

I am unsure of which modifications to make to correct this.

If anyone is able to help me out I would be much appreciative.

Regards.

Answer 1

Try Add this to your CSS this might help you

#basic_info ul {
padding:0px;
margin:0px;
list-style-position:inside;
list-style-image:url(tick.png);
width:100%; 
position: relative;
font-size:0.8em;
float: left;    

}

#basic_info li {
border-top:0.1em solid #DFDFDF;
background:#F7FEF3;
position: relative;
width:100%;
float: left;

}

Answer 2

try adding clear:right to the li element like

#basic_info li {
border-top: 0.1em solid #DFDFDF;
background: #F7FEF3;
clear: right;
}