<!doctype html>
<html>
  <head>
    <title>Przykład układu</title>
    <style type="text/css">
    *,
    *:after,
    *:before {
      box-sizing: border-box;
    }

    html,
    body,
    main {
      height: 100%;
      margin: 0;
      width: 100%;
    }

    .layout-header {
      background-color: #DDDD88;
      display: block;
      min-height: 10%;
      width: 100%;
    }

    .layout-header,
    .layout-sidebar,
    .layout-content {
      text-align: center;
    }

    .layout-sidebar,
    .layout-content {
      float: left;
      height: 100%;
    }
 
    .layout-sidebar {
      background-color: #8888BB;
      width: 20%;
    }

    .layout-content {
      background-color: #EEBB55;
      width: 80%;
    }

    @media all and (max-width: 640px) {
      .layout-header,
      .layout-sidebar,
      .layout-content {
        display: block;
        float: none;
        height: auto;
        min-height: 100px;
        width: 100%;
      }
    }
    </style>
  </head>
  <body>
    <main>
      <header class="layout-header">Nagłówek</header>
      <div class="layout-sidebar">Pasek boczny</div>
      <div class="layout-content">Zawartość</div>
    </main>
  </body>
</html>
