Using block formatting context with float element

by Konstantin Rouda

HTML

<section class="c-container">
  <aside class="c-aside"></aside>
	<article class="c-article"></article>
</section>

CSS

HTML {
  /*using system font-stack*/
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 

  /*font-size: 115%;*/ /*~18px*/
  font-size: 100%; /*~16px*/
  font-size: calc(16px + (20 - 16) * (100vw - 300px) / (1100 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
/*   zoom: 5; */
}

BODY {
  height: 720px;
  margin: 0;
  color: rgb(58, 61, 64);
/*   color: #f1f1f1; */
/*   background-color: rgb(52, 0, 48);
  background-color: rgb(252, 250, 248); */
  background-color: rgb(240, 243, 250);
/*   background-color: rgb(254, 254, 254); */
/*   zoom: 5; */
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*=== Actual Style ===*/

.c-container {
  display: inline-block;
  border: 1px solid firebrick;
}

.c-aside {
  float: left;
  width: 300px;
  height: 400px;
  margin-right: 1rem;
  background: rgba(255, 255, 0, 0.4);
}

.c-article {
  /*display: inline-block;*/
  width: 900px;
  height: 300px;
  background: green;
}