CSS overflow : list in a div

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

Try increasing the width from 645px to a greater value in .rowUl if feasible in your case.

Answer 2

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

Answer 3

You have 3 floated LI elements, each 220px wide. 3*220 = 660, but the containing element's width is only 645px, so the third one cannot fit in next to the 2nd one and falls to another row below the first one. If you want them all in one row, set .rowUl's width to 660px.

Also, I don't know if you're using some kind of CSS reset - if you don't, be aware of the fact that default margins and paddings of UL and LI elements can also affect this. You need to set them to 0 if you want to make sure that they don't.

Answer 4

You have exceeded width limit of inline elements by 645px within 660px (each 220px for all three elements)

You can do it by increasing width of outer elements more than 660px

Hope this helps
Myra