Question

This is my code

<ul style="list-style-type: circle; margin-left:70px;">
<li >
    <a style="">
        <div style="border:1px solid green;float:left">asdsd</div>
        <div style="border:1px solid blue;float:left">.............</div>
    </a>
</li>
</ul>

For some reason the list circle appears over the text and not to left of it.

I suspect it’s the two floated divs that are the culprits. I’ve tried my usual solution for this with another div with style=”clear:both”, but that didn’t work either.

This is driving me crazy…

Edit:
The reason I have divs in a list is that I need to use this code for my jquery UI autocomplete which I need to divide into columns (the divs in my code)
This was the only way I could do that. Without the circle everything works great. But with the circle…

Answer 1

Firstly, I’d advise breaking the CSS out into another file. Displaying the divs as inline-block rather than floating them will deliver a similar look. Here’s a JS Fiddle with the code: http://jsfiddle.net/mMQBy/