Горизонтальные элементы содержимого с правым полем

Question

Вот моя разметка:

<div id="why-us">
    <span class="heading">Why Us?</span>
    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

Вот мой CSS:

#why-us { float: left; }
#why-us span.heading { font-size: 13pt; color: #3A3A3A; display: block; }
#why-us div.section { float: left; width: 400px; margin-right: 50px; }
#why-us div.section p { font-size: 9pt; }

Как сделать так, чтобы он применялся только margin-right: 50px; к каждому div.section, КРОМЕ для последнегоодин?Это можно сделать только на чистом CSS?В идеале я не хочу указывать класс ".last" и не использовать псевдоклассы, поскольку сайт должен работать во всех браузерах.

РЕДАКТИРОВАТЬ: Есть ли более приятный способ сделать это?Поскольку сейчас я генерирую код с использованием PHP, это означает, что мне нужно добавить дополнительный код, чтобы он проверял последний DIV.Я знаю, что это не так уж плохо, но все же я бы предпочел более элегантное решение:)

Answer 1

Вы можете переопределить CSS в последнем div, например:

<div id="why-us">
    <span class="heading">Why Us?</span>
    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="section" style="margin-right: 0px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

Это действительно ужасно, но я думаю, что это должно сработать.

Answer 2

Вы можете использовать дочерние селекторы следующим образом:

#why-us div.section:last-child{
    margin-right:0;
}

Пример: http://jsfiddle.net/Br2DG/