Box-sizing cyclic percentage

by kmouse

HTML

<div class="float">
  <div class="w50pct">LOOOOOOOOOOOOOOOOOOOONG</div>
</div>

<hr/>

<div>
  <div class="h50pct inner">
    <div class="h150px innermost"></div>
  </div>
  <div class="h30px"></div>
</div>

CSS

div {
  border: 3px solid #ff5757;
  padding: 3px;
  margin: 5px;
}
div > div { border-color:rgb(104, 115, 187); }
div > div > div { border-color:#eecc5c }
hr { clear: both; margin: 50px 0; }

.float {
  float: left;
}
.w50pct {
  width: 50%;
}
.h50pct {
  height: 50%;
}
.h150px {
  height: 150px;
}
.h30px {
  height: 30px;
}