Page deviation into 4 parts H Layout css - html

Question

I am trying to make an H page layout:
body {
background-color: grey;
background-size: 100%;
background-repeat: no-repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.a {
float: left;
width: 25%;
height: 100%;
border: 1px solid blue;
}
.b {
float: left;
width: 50%;
height: 60%;
border: 1px solid blue;
}
.c {
float: left;
width: 50%;
height: 40%;
border: 1px solid blue;
}
.d {
float: right;
width: 25%;
height: 100%;
border: 1px solid blue;
}
<div class="a">
text
</div>
<div class="b">
text
</div>
<div class="c">
text
</div>
<div class="d">
text
</div>
but for some reason my last div goes to the bottom
I was curious if I can do what I want but on flexbox so I tried this as well
How to split page into 4 equal parts?
http://jsfiddle.net/scriv/ye6bd4ow/4/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
float: left;
}
#div1 {
background: #DDD;
width: 20%;
height: 100%;
}
#div2 {
background: #AAA;
width: 60%;
height: 60%;
}
#div3 {
background: #777;
width: 60%;
height: 40%;
}
#div4 {
float: right;
background: #444;
width: 20%;
height: 100%;
}
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
Same result but I think a little closer than the 1st example
I know this is a very controversial question but any help even an opinion of which approach u think is best is appreciated. Thanks in advance!

Answer 1

There are two issues to fix (if you want the float version to work):
1.) You need to use box-sizing: border-box; to include the border in the width measurement, otherwise (see your snippet) the fourth element will slip below the third one since there isn't enough space for it (only by a few pixels, but nevertheless).
2.) You need to change the order in the HTML: d should be the third element so that it can be at the top of the page/container:
* {
box-sizing: border-box;
}
body {
background-color: grey;
background-size: 100%;
background-repeat: no-repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.a {
float: left;
width: 25%;
height: 100%;
border: 1px solid blue;
}
.b {
float: left;
width: 50%;
height: 60%;
border: 1px solid blue;
}
.c {
float: left;
width: 50%;
height: 40%;
border: 1px solid blue;
}
.d {
float: right;
width: 25%;
height: 100%;
border: 1px solid blue;
}
<div class="a">
text a
</div>
<div class="b">
text b
</div>
<div class="d">
text d
</div>
<div class="c">
text c
</div>