CODEWITHSUNDEEP
csscss-float
user1452062
user1452062

Reputation: 805

Force floated elements to start in a new line

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/

Upvotes: 1

Views: 107

Answers (1)

Santiago Rebella
Santiago Rebella

Reputation: 2449

you can do it clearing the sides as:

clear:both;

or maybe 

clear:right;

just as an example, could be also;

clear:left;

Upvotes: 1

Related Questions