Strange whitespace in list item with floating div

Question

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

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 fiddle: http://jsfiddle.net/38fdyvu6/1/

What I see in Chrome:

And in IE:

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

Shaylashaylah

Answer 1

if you can add a div element inside li then try this fiddle

Just add this class .my-con 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;
}

Hoedown

Works like a charm! Thank you! – Shaylashaylah

Answer 2

Without knowing how you are implementing this:

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

It's hard to be precise but perhaps a pseudo-element could 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>

Dittography

Well!! m always wonder how you got answer of those question which i think impossible to solve..i wish one day i will do the same :p..upvoted your answer .. :) – Margalit

I don't know that this will work because of the unknown implementation I mentioned but it might so I just offer it as a suggestion. :) Thanks. – Dittography