Can I Place Boxes Three In Each Row, Equally Spaced And Glued To Container On Left And Right?

I think this can't be done in CSS, but there are people here who know more than I do. ;-) I have a couple of boxes inside a container. I want the boxes to be three in each row and

Solution 1:

It can be done by logical use of widths and margins. Check this updated fiddle as an example. The relevant code is below:

#containerdiv {
    width: 32%; 
    margin-right: 2%;
    margin-bottom: 2%;
}
#containerdiv:nth-child(3n) {
    margin-right: 0;
}

The total width for each "line" adds up to 100%: three 32% widths, and two 2% margins. The third item on every line has it's right margin removed with an nth selector.

You don't have to use percentages, but the concept will always remain the same - divide up your widths and margins so as to fit their parent perfectly (or just slightly less), and be wary of extra pixels from borders.

Note: I would advise against using percentage heights, as they can cause problems.