Question

I believe my question would be best answered with an example. So here is a JSFiddle.

HTML:

<ul>
    <li>
        <a href="#">                            
            <img alt="placeholderImg" src="http://placehold.it/82x82">
        </a>
    </li>
    <li>
        <a href="#">

            <img alt="placeholderImg" src="http://placehold.it/82x82">
        </a>
    </li>
    <li>
        <a href="#">                            
            <img alt="placeholderImg" src="http://placehold.it/82x82">
        </a>
    </li>
</ul>

What I want to do is have my floated list items occupy an exact width of 262px in all major browsers (IE7 and above).

Answer 1

I assume you need to keep li’s at a certain width, so that they float left in order to lie next to each other? In that case you need to do away with the scroll overflow because the scrollbar is taking up unwanted space. Your items should lie next to each other now if your math (adding widths and margins together) is done correctly .

http://jsfiddle.net/Diezel23/kGKaV/14/