Question

I have an image gallery and I dont want give an extra class to third list item:

   <div class="row">
        <ul class="rowUl">
            <li>ssss</li>
            <li>ssss</li>
            <li>ssss</li>
        </ul>
    </div>

and css

.row {
    width: 620px;
    clear: both;
    overflow: hidden;
}

.rowUl {
    width: 645px;
    float: left;
}

.rowUl li {
    width: 220px;
    float: left;
}

but the third list item drop in other row. How can I solve this without extra class?

Answer 1

220 * 3 = 660,

rowUL = 645

thats 15 extra pixels pushing the floated div down.

Solutions:

Make rowUL width 660, make row width 660

OR:

make the rowUL li width 215