Force floated elements to start in a new line

Question

I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.

My css:

ul {
    padding:0;
    margin:0;
    list-style:none;
    width:700px;
}

ul li {
    float:left;
    border:1px solid #000;
    width:24%;
    margin:0 0.3% 20px 0.3%;
    font-size:11px;
}

.yellow {
    background:yellow;
}

online preview: http://jsfiddle.net/f3CA3/1/

Not possible with CSS only. Except the `display: table-*` family maybe. `inline-block` does what it says: do not ignore whitespace (inline) but act as block (expand horizontally as much as possible). — Sergiu Paraschiv, Jan 20 '14 at 16:23
For `inline-block` and whitespace see: http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items — Paulie_D, Jan 20 '14 at 16:25

Santiago Rebella · Accepted Answer · 2014-01-20T16:38:54.693

1

you can do it clearing the sides as:

clear:both;

or maybe

clear:right;

just as an example, could be also;

clear:left;

edited Jan 20 '14 at 16:38

answered Jan 20 '14 at 16:29

Santiago Rebella

2,342
2
19
28

2

Why would you `clear:right` when there's nothing being floated to the right to be cleared? – BoltClock Jan 20 '14 at 16:29

Force floated elements to start in a new line

1 Answers1