Remove margin in a set of floating buttons

Question

I have a container on my page with the specified width; this means that you can center all the buttons on the page.

I use margin-righton buttons, but I can’t fill the container with buttons so that they go to the edge with the container, otherwise they are reconfigured, and the grid becomes 3x4 instead of the desired 4x3.

So, how do I get rid of the margin at the end of the buttons? I can not use the selector :last-child.

<div id="container">
    <div id="months">
        <div class="month-button jan" data-month="January"></div>
        <div class="month-button feb" data-month="February"></div>
        <div class="month-button mar" data-month="March"></div>
        <div class="month-button apr" data-month="April"></div>

        <div class="month-button may" data-month="May"></div>
        <div class="month-button jun" data-month="June"></div>
        <div class="month-button jul" data-month="July"></div>
        <div class="month-button aug" data-month="August"></div>

        <div class="month-button sep" data-month="September"></div>
        <div class="month-button oct" data-month="October"></div>
        <div class="month-button nov" data-month="November"></div>
        <div class="month-button dec" data-month="December"></div>
    </div>
</div>

CSS:

#container {
    width: 900px;
    margin: 10px auto;
}

#months {
    margin: 10px 5px 21px;

    float: left;
}

.month-button {
    width: 115px;
    height: 26px;

    background: url("/__resources/images/months.png");
    cursor: pointer;
    float: left;
    margin: 8px 87px 0px 0px;
}

Answer 1

You can use nth-childfor zero right margin for every fourth element:

.month-button:nth-child(4n) {
    margin-right:0;
}

, , zero-right-margin:

.zero-right-margin {
    margin-right:0;
}

Answer 2

- .

#months{ /* This is the wrapper of your buttons */
    margin-right: -87px; /* Negative of buttons right margin */
}

Answer 3

If you are stuck with IE8 support, as mentioned above, it is best to split each line into its own container.

IE8 does not support :nth-childor :last-child, but supports [:first-child][1]pseudo classes. You can put your fields on the left, and not on the right, and then use [:first-child][2]to delete fields only in the first case.

HTML:

<div id="container">
    <div id="months">
        <div class="row">
            <div class="month-button jan" data-month="January"></div>
            <div class="month-button feb" data-month="February"></div>
            <div class="month-button mar" data-month="March"></div>
            <div class="month-button apr" data-month="April"></div>
        </div>
        <div class="row">
            <div class="month-button may" data-month="May"></div>
            <div class="month-button jun" data-month="June"></div>
            <div class="month-button jul" data-month="July"></div>
            <div class="month-button aug" data-month="August"></div>
        </div>
        <div class="row">
            <div class="month-button sep" data-month="September"></div>
            <div class="month-button oct" data-month="October"></div>
            <div class="month-button nov" data-month="November"></div>
            <div class="month-button dec" data-month="December"></div>
        </div>
    </div>
</div>

CSS

.month-button {
    width: 115px;
    height: 26px;

    background: url("/__resources/images/months.png");
    cursor: pointer;
    float: left;
    margin: 8px 0px 0px 87px;
}
.month-button:first-child {
    margin-left: 0;
}