Верстка div три колонки с шапкой и подвалом

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

Первым делом нам надо разобрать структуру, как все будет на нашем сайте. Для начала я покажу сам код, а уже после разберем, что и как. Ниже пример, также попробуйте менять размер окна, чтобы увидеть как себя ведет структура.

Сам HTML код структуры:

<header>
Шапка
</header>
<div id="wrapper">
<div id="main">
<div id="content">
Основной контент
</div>
</div>
<div id="left_side">Левый</div>
<div id="right_side">Правый</div>
</div>
<footer>
Подвал
</footer>

По коду видно, что шапка и подвал не зависимы. То есть они не заключены в какие-то контейнеры, то-есть если у вас сайт будет иметь определенную ширину, то шапку и подвал нужно отдельно центрировать, дабы они не съехали. Забегу наперед, в моем примере контент будет шириной 1170пикселей и поэтому я в стилях подвалу и шапке задам эту же ширину и выровняю по центру.

Сам контент вместе с сайдбарами, заключен в общий контейнер, который имеет айди - wrapper. Далее контент, который располагается по центру и имеет айди - content, заключается в еще один контейнер с айди - main. Это обязательно, чтобы в будущем получилась адаптивность.

После контента рядом располагаются два сайдбара - левый с айди - left_side и правый с айди - right_side.

Чтобы все правильно отображалось, нужно добавить стили CSS:

header{
	max-width:1170px;
	margin:0 auto;
	}

 footer{
	max-width:1170px;
	margin:10px auto 0;
	clear:both;
	}

#wrapper{
	max-width:1170px;
	margin: 0 auto;
	position:relative;
	height:100%;
	}

#main{
	float:left;
	width:100%;
} 
#left_side{
	width:240px;
	margin-left:-100%;
	float:left;
}

#content{
	margin:0 440px 0 250px;
}

#right_side{
	float:left;
	width:430px;
	margin-left:-430px;
}

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

Так же сайдбары имеют фиксированную ширину, а при уменьшении размера окна браузера, уменьшается средняя колонка - контент. Если будете менять ширину сайдбаров, меняйте свойство margin у контента, чтобы задать правильные отступы.

Важным моментом является свойство у подвала - clear:both;. Если его убрать, то подвал подпрыгнет вверх к шапке, а это нам не нужно вообще. Если Вам нужно будет сделать отступ между контентом и подвалом, то можете между ними добавить еще один div-блок и ему прописать свойство clear:both;, а у подвала убрать его и задать отступ. Например:

//Блок
<div class="clear"></div>
//Стили
.clear{clear:both;}

Теперь добавим стилей CSS уже для правильного отображения сайдбаров и контента на мобильных устройствах, то есть добавим адаптивности нашей версте.

У меня указаны параметры для ширины сначала - 950px, потом - 500px.Если Вы будете менять ширину контента или всего контейнера, то можете поменять значения на свои, не забывайте про это и просчитывайте правильно, чтобы потом не возникло проблем.

@media (max-width: 950px){
#left_side{
	position:relative;
	margin:0;
	width:48%;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	transition: all 0.8s ease;
	}
#content{
	width:98%;
	margin:0 auto;
	position:relative;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	transition: all 0.8s ease;
	}
	
#right_side{
	position:relative;
	float:right;
	margin:0;
	width:48%;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	transition: all 0.8s ease;}
}
@media(max-width: 500px){
	#left_side{width:99%;}
	#right_side{width:99%;}
}

В принципе тут все просто, а основной объем занимает свойство transition. Сделано это для плавной анимации при смене размера окна. Если Вам это не нужно то можете удалить его полностью со всех айди.

Поняв суть того, как это работает, Вы с легкостью будете верстать адаптивные страницы с тремя колонками, которые имеют два сайдбара с контентом посредине.

На этом все, спасибо за внимание. 🙂