Схема на двуколонен уеб дизайн в CSS

Нека направим двуколонен уеб дизайн със следния вид:

За начало ще създадем основната структура на страницата:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

Сега ще зададем стилове на wrapper-а, като го подравним в центъра на екрана:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

Нека сега зададем стилове на хедъра и футъра:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

Както виждате, задаваме височина на хедъра и футъра. Правим това, защото в нашата схема те нямат съдържание. При наличие на съдържание не трябва да се задава височина на блоковете - тя ще се формира от тяхното съдържание.

Обърнете внимание също, че не задаваме ширина на тях. Работата е там, че хедърът и футърът са блокови елементи и тяхната ширина ще автоматично стане равна на ширината на wrapper-а.

Нека сега им зададем padding, за да не залепва текста за границите:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

Наличието на padding обаче, ще повлияе негативно на размерите на блоковете - те ще станат по-големи, отколкото е указано. Нека променим поведението на всички блокове, така че padding и граници да не разширяват нашите блокове:

* {
	box-sizing: border-box;
}

Сега трябва да поставим контента и страничната лента в един ред. Ще направим това с помощта на flexbox:

#container {
	display: flex;
}

Ще посочим на контента и страничната лента тяхната ширина. При това сумата от ширините им трябва да е равна на ширината на wrapper-а:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

Да речем, че искаме да направим отстъп между страничната лента и контента. В този случай на страничната лента трябва да се зададе margin. При това ще трябва от някой да отнемем ширина за този margin. Ще отнемем от контента, като съответно намалим неговата ширина:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Нека сега добавим височина, тъй като нашите елементи не съдържат съдържание. Достатъчно е да се добави височина само на един елемент, тъй като вторият flex елемент ще се подравни по височина (защо?). Нека зададем височина на контента:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Нека добавим на контента и страничната лента останалите стилове:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

Всичко, нашият уеб дизайн е готов. Нека съберем целия код заедно:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}