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>
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.
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).
