Home/ Questions/Q 6931963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:38:43+00:00

Here is my markup: <div id=why-us> <span class=heading>Why Us?</span> <div class=section> <p>Lorem ipsum dolor

  • 0

Here is my markup:

<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>

Here is my 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; }

How can I make it only apply margin-right: 50px; to each div.section EXCEPT for the last one? Can this be done in pure CSS only? I don’t ideally want to specify a “.last” class, nor use pseudo classes as the site needs to work in all browsers.

EDIT: Is there any nicer way of doing this? As I am now generating the code using PHP, which means I have to add extra code to make it check for the last DIV. I know that isn’t too bad but still I would prefer a more elegant solution 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could override the CSS in the last div, as in:

    <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>

    It’s really ugly but I think it should work.

    • 0