Адаптивный header, footer и main-content
<header class="main-header">HEADER</header>
<div class="content-container clearfix"</div>
<aside class="sidebar">SIDEBAR</aside>
<div class="main-content">MAIN-CONTENT</div>
</div>
<footer class="main-footer">FOOTER</footer>
.header, .footer {
min-height: 50px;
background-color: pink;
border: 3px dotted black;
margin: 5px;
padding: 5px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.aside {
float: left;
width: 150px;
min-height: 350px;
margin-left: 5px;
padding: 5px;
background-color: lightyellow;
border: 3px dotted black;
}
.main-content {
min-height: 350px;
margin: 5px;
margin-left: 150px;
padding: 5px;
background-color: lightgreen;
border: 3px dotted black;
}
sidebar зафлоачен влево и с фиксированной шириной, а main-content
с margin-left на ширину sidebar
<header class="main-header">
<div class="layout-positioner clearfix">
<div class="layout-column layout-column1">
...КОЛОНКА №1...
</div>
<div class="layout-column layout-column3">
...КОЛОНКА №3...
</div>
</div>
</header>
<section class="main-content">
<div class="layout-positioner clearfix">
<div class="layout-column layout-column1">
...КОЛОНКА №1...
</div>
<div class="layout-column layout-column2">
...КОЛОНКА №2...
</div>
<div class="layout-column layout-column3">
...КОЛОНКА №3...
</div>
</div>
</section>
<footer class="main-footer">
<div class="layout-positioner clearfix">
<div class="layout-column layout-column1">
...КОЛОНКА №1...
</div>
<div class="layout-column layout-column3">
...КОЛОНКА №3...
</div>
</div>
</footer>
.main-header, .main-footer {
min-height: 90px;
padding: 10px;
background-color: lightblue;
}
.main-content {
min-height: 380px;
padding: 10px;
background-color: lightyellow;
}
.clearfix {
content: "";
display: table;
clear: both;
}
.layout-positioner {
margin: 10px auto;
padding: 10px;
width: 1000px;
outline: 3px dashed orange;
}
.layout-column {
min-height: 50px;
width: 290px;
border: 5px dashed deeppink;
}
.layout-column1 {
float: left;
margin-right: 50px;
}
.layout-column2 {
float: left;
margin-right: 50px;
}
.layout-column3 {
float: right;
}