How to start a new line after float:left with different height?

Question

I have this code on jsfiddle.

As you see the 3rd or 4th li item is starting in a new line (depending on your window width). But this new line not started at the beginning of the line because of different heights.

How can I do in CSS the new lines starts always at the beginning of the lines?

<ul>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:190px;">here is an img in real</div>
        <input type="text" id="img_02" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:180px;">here is an img in real</div>
        <input type="text" id="img_03" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_04" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_05" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height: 150px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
</ul>

ul { width: 650px; }
li {
    display: block;
    width: 200px;
    float: left;
    margin: 2px;
}
.imgplace {
    width: 200px;
    background: #f00;
}
.imgicon {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}
}

laaposto · Accepted Answer · 2014-03-10T12:25:52.023

8

Just remove float:left and add display: inline-block and vertical-align: top to align them better(+1 Hashem from comments)

Try

li {
   display: inline-block;
   width: 200px;
   margin: 2px;
   vertical-align: top;
}

DEMO

edited Mar 10 '14 at 12:25

answered Mar 10 '14 at 12:17

laaposto

11,835
15
54
71

3

+1 *That's the 3rd time in one minute (in different questions) that I should note:* mind the **gap** [between inline(-block) elements](http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532) which increases the space between list items. – Hashem Qolami Mar 10 '14 at 12:22
1

Also better to add `vertical-align: top` for the inline(-block) list items. – Hashem Qolami Mar 10 '14 at 12:24

score 5 · Answer 2 · answered Mar 10 '14 at 12:17

5

When you know that you have always 3 in one row, you could use clear

li:nth-child(3n+1) {
    clear: left;
}

http://jsfiddle.net/SLh49/5/

answered Mar 10 '14 at 12:17

yunzen

32,854
11
73
106

How to start a new line after float:left with different height?

2 Answers2