To accomplish this task, one creative approach is to determine the width of each box based on the total number of boxes present.
This can be achieved effectively using CSS 3 with some clever techniques.
Consider the following HTML structure:
<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 utilize the following CSS code:
.theContainer section:nth-last-child(2),
.theContainer section:nth-last-child(2) ~ section { width: 49%; }
In this selector, we are targeting the second element from the end within theContainer and its adjacent elements as well.
If we have enough elements, the selector will match the desired position when counting backwards. If not, the selector won't find a match. For instance, if we have 3 items and request nth-last-child(4), it will exceed the existing items and produce no result. Thus, our selector only applies when an item is found at a specific backward position.
.theContainer section:nth-last-child(3),
.theContainer section:nth-last-child(3) ~ section{ width: 32%; }
In this case, we are specifying the third section from the end along with its neighboring sections.
The first rule instructs the browser to identify all sibling sections within the div where the last child's position is either 3 or 2.
When the last child is 3, the width will be set to 32%. Similarly, for a last child of 2, the width will be adjusted to 50%.
You can view a demonstration of this solution in action on jsFiddle: http://jsfiddle.net/HreBe/