CODEWITHSUNDEEP
htmlcsscss-floathtml-lists
Axm
Axm

Reputation: 627

Strange whitespace in list item with floating div

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:
enter image description here

And in IE:
enter image description here

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

Upvotes: 5

Views: 164

Answers (2)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

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;
}

Upvotes: 5

Paulie_D
Paulie_D

Reputation: 115108

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>

Upvotes: 3

Related Questions