[Petja]

Если контейнер position absolute, а внутри него идут элементы float друг за другом в строчку, и если внутреннему элементу задать margin или padding (right или left) - то последний элемент съезжает на новую строку...

Получается, что внутренние элементы float создают общую ширину блока absolut (как они ее создают?), а margin-right почему-то не участвует в создании ширины (почему?) а перевешивает 100% ширину и выходит за ее рамки.

Подскажите, пожалуйста, какая логика за этим всем стоит? Что почитать?

Вот код http://jsfiddle.net/Axjvd/5/

<ul class="mainMenu">
    <li><a href="">Цены</a></li>
    <li><a href="">Заказать</a></li>
    <li><a href="">Услуги</a></li>
    <li><a href="">Продвижение</a></li>
    <li><a href="">Портфолио</a></li>
    <!-- Причем не важно сколько пунктов, последний всегда переносится! -->
    <!--<li><a href="">Цены</a></li>
    <li><a href="">Заказать</a></li>
    <li><a href="">Услуги</a></li>
    <li><a href="">Продвижение</a></li>
    <li><a href="">Портфолио</a></li>-->
</ul>

<style type="text/css">
    .mainMenu{
        height: 40px;
        list-style: none;
        background-color: #0f0;
        position: absolute; /* Если position = absolute */
    }
    li{
        float: left;
        margin-right: 4%; /* Из-за него переносится на другую строку */
        /*padding-right: 4%; Так тоже самое будет */
    }
    a{
        display: block;
        height: 31px;
        padding: 9px 10px 0;
    }
</style>