How do I evenly place 2-5 div blocks over 1-2 rows?

See more:

Javascript

CSS3

C#5.0

Hi,

Depending on the users roles, I want to display div blocks for each of their roles.

I want the div blocks to be set out in a particular way depending on how many will be shown:

1 role: If the user only has one role then he will be redirected to that page anyway
2 roles: There should be two divs on one row
3 roles: There should be three divs on one row
4 roles: There should be two divs on the top row and two on the bottom
5 roles: There should be three divs on the top row and two on the bottom

so for any case, row one has two divs in cases 2 & 4 and three divs in cases 3 & 5, and row two have either none in cases 2 & 3 and two in cases 4 & 5.

These divs will be evenly sized, large 'buttons' (kind of), so they need to be evenly spaced on the page. I would like to use css to place them which is in keeping with the rest of the site.

I can use pure css, c# code-behind or javascript if need be.

I would like suggestions on how I can set up the css and if I can avoid using c#
Thanks

EDIT:
I tried the table-like displays but I could not get the cells to justify evenly.

I managed to single out the top, bottom, left and right items with a combo of :first-child and :last-child

<style>
        div .HubRow {
        width: 100%;
    }
        div .HubRow:first-child div   {
            margin-top: 0;
        }
        div .HubRow:last-child div   {
            margin-bottom: 0;
        }

        div .HubRow div {
            width: 200px;
            height: 200px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
        }

            div .HubRow div:first-child {
                margin-left: 0;
            }

            div .HubRow div:last-child {
                margin-right: 0;
            }
</style>

but the margin-top and margin-bottom have no effect >_<<br mode="hold" />
I have now been reduced to this:

<style>
    div .HubRow {
        width: 100%;
        height: 100%;
        text-align: center;
    }
        div .HubRow div {
            width: 200px;
            height: 200px;
            display: inline-block
        }

</style>

Not quite the desired effect, but close enough so that I can continue.

PS: The inner div size is only representative. They will all be the same size but will be individual controls. I just haven't written them yet ^_^


EDIT2:

I have tried solution 2 and it worked well in my case. The final style is as follows:

.roles > div
{
    box-sizing: border-box;
    display: inline-block;
    padding: 10px;
    width: 33.3333333%;
    margin-right: -4px;
    text-align: center;
}
.roles > div:nth-last-child(2n):first-child,
.roles > div:nth-last-child(2n):first-child ~ div
{
    width: 50%;
}
.roles > div:nth-child(n+3) ~ div
{
    width: 50%;
}

Thanks guys ^_^