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 ^_^