HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
Футер
</div>
<div class="row">
<div class="text">
Текст
</div>
<div class="sidebar">
Сайд бар
</div>
</div>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
.row:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.row { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.row { display: block; }
/* close commented backslash hack */
.header{
background-color:red;
width: 100%;
height: 100px;
text-align: center;
margin-bottom: 20px;
box-sizing: border-box;
}
.text{
background-color: green;
width: 80%;
min-height: 300px;
float: left;
box-sizing: border-box;
}
.sidebar{
background-color: green;
width: 20%;
min-height:300px;
float: left;
margin-left: 5px;
box-sizing: border-box;
}
А в итоге
Простой
