flex

by DarcyAn

HTML

<div class="header">header</div>
<div class="body">
  <div class="side">side</div>
  <div class="main">main</div>
</div>
<div class="footer">footer</div>

CSS

html, body {height: 100%;}
body { display: flex; flex-flow: column;}
.header, .footer {
  height: 70px;
  background-color: lightgray;
}
.body { flex: 1; display: flex; width: 500px; align-self: center; border: 1px solid black;}
.side { width: 200px; background-color: pink; }
.main { flex: 1; margin-left: 10px; background-color: snow; }