CODEWITHSUNDEEP
css
Andreas Larsson
Andreas Larsson

Reputation: 565

HTML List with two floated divs inside doesn't display correctly

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...

Upvotes: 0

Views: 64

Answers (2)

Simon Arnold
Simon Arnold

Reputation: 16157

You can't put block element in inline element (<div> in <a>).
You will have to repeat your <a> inside of each <div>
Than use display:inline-block instead of float:left; on your <div>.

Example

http://jsfiddle.net/hJfUF/

Upvotes: 0

White Elephant
White Elephant

Reputation: 1381

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/

Upvotes: 1

Related Questions