Идеальная 3-колоночная вёрстка средствами CSS

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью.

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.

Наша цель — сделать трехколоночный сайт, блоки которого будут:

1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
3. Адаптироваться при уменьшении заданных размеров.

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block. Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline:

			left
content
right
		

Далее будет логично написать стили для этих классов, что мы и сделаем:

			html, body {margin:0;padding:0;}
    .main {
        margin:0 auto; /* Центрируем блоки */
        width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */
        max-width:700px; /* Устанавливаем максимальную ширину */
    }
    .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;
        */
    }
    div.inline {font-size:0;} /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/
    .left-block {
        background:red;
        width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/
        height:300px; /* Высота блока */
    }
    .content {
        background:green;
        width:60%;
        height:300px;
    }
    .right-block {
        background:blue;
        width:20%;
        height:300px;
    }
		

Результат:

Размер окна больше 900px

Размер окна меньше 900px

Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал, просто с уменьшением их размера.

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:

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

Более подробно можно посмотреть на JS Fiddle  —  приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику, Рималю Сафарову.

Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.