Question

Suppose I have the following HTML:

<div id="Wrapper">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
</div>

and the following CSS:

.MyClass {
    float: left;
    margin-right: 5px;
}

All these elements are going to be positioned on one line with a space in between of 5px. The problem is that there will also be a space of 5px at the end. I want to have Wrapper really wrap the .MyClass divs so that there’s no space on the edge.

Now I can think of several ways of doing this:

• with jquery, set the right margin of the last element to 0.
• with CSS create a new class – .MyClassForLastElement with marin-right set to 0.
• creating a negative right-margin of -5px for .Wrapper.

I was wondering if there’s an elegant and clever way of doing it.

Answer 1

Not sure if there is a perfect solution, I use to do that:

.MyClass {
    float: left;
    margin-left: 5px;
}
.MyClass:first-child {
    margin-left: 0;
}

I do it with with first-child since it is supported in IE6-7 while last-child is not.