JSFiddle - React, Tailwind, and code Playground

by Safarov

HTML

<div class="head">head</div>
<div class="main inline">
<div class="left-block">
<span>left</span>
</div>
<div class="content">
<span>content - Эпоха задавать ширину в px заканчивается, в место него приходит, 100%, поддерживаемый во всех браузерах. Уловили?!</span>
</div>
<div class="right-block"><span>right</span>
</div>
</div>
<div class="footer">footer</div>

CSS

html, body{margin:0;padding:0;}
.head{
  background:gold;
  width:100%;
  height:40px;
}

.main{
  margin:0 auto; /* Центрируем блоки */
  width:100%; /* Задаем ширину 100% что бы сделать ее резиновой */
  max-width:700px; /* Устанавливаем максимальную ширину */
}

div.inline{font-size:0;} /* Ставим родителю значение 0, что бы убрать отступы у блоков*/

.inline div{
  display:inline-block; /* Делаем блоки по горизонтали */
  display: -moz-inline-stack; /* Для FireFox 2, тот же самый что и inline-block */
  vertical-align:top; /* Выравниваем их сверху */
  font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение у родителя */
  /* Для IE 6 и IE 7
  zoom: 1;
  *display: inline;
  */
}

.left-block{
  background:red;
  width:20%; /* Задаем ширину в процентах что бы сделать ее резиновой */
  height:300px; /* Высота блока */
}

/* Ставим это в том случае когда удаляем макс ширину в main и оставляем только width:100%
.left-block span{
  float:right;  Ну тут думаю понятно 
}
*/

.content{
  background:green;
  width:60%;
  height:300px;
}

.right-block{
  background:blue;
  width:20%;
  height:300px;
}

.footer{
  background:#ccc;
  width:100%;
  height:40px;
}

@media  (max-width:600px){
.inline div{
display:block; /* Делаем блоки "Блочными", т.е. друг под другом */
width:100%; /* Задаем на всю ширину экрана */
height:100px;
}
.inline span{
float:left;
}
}