Strange spaces in a floating div list item

Question

I have an unordered list with two floating divs in it. One on the left, one on the right. And in Chrome, I see a space at the top. In IE, everything seems fine. How to get rid of this gap?

Styles:

ul { margin: 1em; } li { width: 100%; padding: 0; margin: 0.5em; border: 1px black solid; } .clear { clear: both; } .left-item { float: left; background-color: red; padding: 1em; } .right-item { float: right; background-color: blue; padding: 1em; } 

HTML code:

 <ul> <li> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </li> <li> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </li> <li> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </li> </ul> 

Sample script: http://jsfiddle.net/38fdyvu6/1/

What I see in Chrome:

And in IE:

I know that I can set li to display: block . But I really need the bullets that I use as expand / collapse indicators.

Answer 1

if you can add div element inside li then try fiddle

Just add this .my-con class to the middle container

HTML:

 <li> <div class="my-con"> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </div> </li> 

CSS

 .my-con{ width: 100%; display: inline-block; vertical-align: middle; } 

Answer 2

Not knowing how you implement this:

"But I really need the bullets that I use as expand / collapse indicators."

It is difficult to be precise, but perhaps a pseudo element can be used instead.

 ul { margin: 1em; } li { width: 100%; padding: 0; margin: 0.5em; border: 1px black solid; position: relative; list-style-type: none; } li:before { content: "\2022"; font-size:1.5em; position: absolute; left: 0; top:0; margin-left: -1em; } .clear { clear: both; } .left-item { float: left; background-color: red; padding: 1em; } .right-item { float: right; background-color: blue; padding: 1em; } 

 <ul> <li> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </li> <li> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </li> <li> <div class="left-item">Item 1</div> <div class="right-item">Item 2</div> <div class="clear"></div> </li> </ul>