<div class="page">
    <header class="header">ТИПА ШАПКА</header>
    <main class="main">
        <aside class="aside aside-left">Левая колонка</aside>
        <article class="article">
            <div class="article__main">Основное содержимое</div>
            <div class="article__footer">Подвал содержимого</div>
        </article>
        <aside class="aside aside-right">Правая колонка</aside>
    </main>
    <div class="bottom">Нижний блок</div>
    <footer class="footer">Типа подвал</footer>
</div>
* {
    box-sizing: border-box;
    color: #fff;
    text-transform: uppercase;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
}
.page {
    display: flex;
    flex-direction: column;
}
.page * {
    padding: 20px;
}
.main,
.article {
    padding: 0;
}
.header {
    background: #c00107;
}
.main {
    display: flex;
}
.aside {
    flex-basis: 20%;
}
.aside-left {
    background: #7855ae;
}
.aside-right {
    background: #e65124;
}
.article {
    flex-basis: 60%;
}
.article__main {
    min-height: 300px;
    
    background: #80b9ee;
}
.article__footer {
    background: #133ff5;
}
.bottom {
    background: #7c7754;
}
.footer {
    background: #bbcbd2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.