Отклонение страницы на 4 части H Макет css

Question

Я пытаюсь сделать макет страницы H:

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>

но по какой-то причине мой последний div идет вниз. Мне было любопытно, смогу ли я делать то, что хочу, но на flexbox, поэтому я тоже попробовал

Как разделить страницу на 4 равные части?

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>

Тот же результат, но я думаю немного ближе, чем 1-й пример

Я знаю, что это очень спорный вопрос, но приветствуется любая помощь, даже мнение о том, какой подход вы считаете лучшим. Заранее спасибо!

Answer 1

Есть две проблемы, которые необходимо исправить (если вы хотите, чтобы версия с плавающей запятой работала):

1.) Вам нужно использовать box-sizing: border-box;, чтобы включить границу в измерение ширины, в противном случае (см. Свой фрагмент ) четвертый элемент будет опускаться ниже третьего, так как для него недостаточно места (всего на несколько пикселей, но тем не менее).

2.) Вам необходимо изменить порядок в HTML : d должен быть третьим элементом, чтобы он мог быть вверху страницы / контейнера:

* {
  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>