Another way to achieve this is to specify the with of each box based on how many boxes you have.
This can be done in CSS 3 with a bit of nifty thinking.
Given the following HTML:
<div class="theContainer">
<section>One</section>
<section>Two</section>
</div>
<div class="theContainer">
<section>One</section>
<section>Two</section>
<section>Three</section>
</div>
We can do this with our CSS:
.theContainer section:nth-last-child(2),
.theContainer section:nth-last-child(2) ~ section { width: 49%; }
Here our selector is saying: Give me the section element inside theContainer, starting from the end and working backwards to the second element (from the end). Also, give me all section elements that are around that element.
If we have enough elements, when we count backwards through the collection, we'll hit an element and our selector will match. If we do not have enough items, our selector will find nothing at that position. For example, if we have 3 items and our selector asks for nth-last-child(4), we'll be counting backwards from the end of the collection by 4 items which will go past all of our existing items and select nothing. Hence our selector only kicks in if it finds an item at position x, working backwards from the end.
.theContainer section:nth-last-child(3),
.theContainer section:nth-last-child(3) ~ section{ width: 32%; }
Here we ask for the 3rd section element from the end and any surrounding section elements.
In the first directive we're asking the browser to find all general section siblings within our div where the div has a last child of 3 or 2.
When there exists a last child 3, then our 32% value will kick in. When there exists a last child 2 then our 50% value will kick in.
Here's a jsFiddle showing this solution in action: http://jsfiddle.net/HreBe/