HTML Layout with float configuration - aligning to middle - html

Question

I have a floating layout in HTML and I want to place boxes both at the beginning, ending and also in the middle.
Here is my snippet:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 80%;
width: 80%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
position: relative;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
}
.tray-top .button,
.tray-bottom .button {
max-width: 33%;
}
.tray-left .button,
.tray-right .button {
max-height: 33%;
}
.tray-top .button.begin,
.tray-bottom .button.begin {
float: left;
}
.tray-top .button.middle,
.tray-bottom .button.middle {
float: left;
}
.tray-top .button.end,
.tray-bottom .button.end {
float: right;
}
.button.middle {
}
.tray-left .button.end,
.tray-right .button.end {
position: absolute;
bottom: 0px;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>
How can I make (please see it in Full page):
Box2 and Box11 to go into middle (while keeping box3 and box12 at the end)?
Box5 and Box8 to go into middle vertically?
Box6 and Box9 to go to the end vertically?
I don't want to stick to this layout but I would like to keep the widest support for all the browsers (including IE11 too).
Please note that #root has 80% width and height. It only means #root's size != body's size (so absolute positioning and left: 50% is not a way to go).

Answer 1

I would add some flexbox for this. It would be difficult to do it with only float and probably not good to use positionning:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 85%;
width: 85%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height: 48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
display:inline-block;
}
.begin {
float:left;
}
.end {
float:right;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>

Answer 2

This solves my issue but I'm not sure if this is the most sophisticated solution for this problem:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 80%;
width: 80%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
position: relative;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
position: relative;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
}
.tray-top .button,
.tray-bottom .button {
max-width: 33%;
}
.tray-left .button,
.tray-right .button {
max-height: 33%;
}
.tray-top .button.begin,
.tray-bottom .button.begin {
float: left;
}
.tray-top .button.middle,
.tray-bottom .button.middle {
float: left;
}
.tray-top .button.end,
.tray-bottom .button.end {
float: right;
}
.button.middle {
float: left;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.tray-left .button.end,
.tray-right .button.end {
position: absolute;
bottom: 0px;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>
I had to make the middle boxes position: absolute and their parents to position: relative then I'm able to change their position within their parents.