CSS'te İki Sütunlu Web Sitesi Düzeni Şeması

Aşağıdaki gibi bir iki sütunlu düzen yapalım:

Öncelikle sayfanın temel yapısını oluşturalım:

<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>

Şimdi wrapper'a stil atayalım, onu ekranın ortasına hizalayalım:

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

Şimdi header ve footer'a stil verelim:

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

Gördüğünüz gibi, header ve footer'a yükseklik veriyoruz. Bunu, şemamızda içeriği olmadığı için yapıyoruz. İçerik varlığında bloklara yükseklik vermemelisiniz - içerikleri tarafından oluşturulacaktır.

Ayrıca onlara genişlik vermediğimize de dikkat edin. Gerçek şu ki, header ve footer - blok elementlerdir ve genişlikleri otomatik olarak wrapper'ın genişliğine eşit olacaktır.

Şimdi onlara, metnin sınırlara yapışmaması için padding verelim:

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

Ancak, padding varlığı blokların boyutları üzerinde kötü etki yapacaktır - belirtilenden daha büyük olacaklardır. Tüm blokların davranışını, padding ve kenarlıkların bloklarımızı genişletmemesi için değiştirelim:

* {
	box-sizing: border-box;
}

Şimdi içerik ve sidebar'ı bir satıra yerleştirmemiz gerekiyor. Bunu flex ile yapalım:

#container {
	display: flex;
}

İçerik ve sidebar'a genişliklerini belirtelim. Bu durumda genişliklerinin toplamı, wrapper'ın genişliğine eşit olmalıdır:

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

Diyelim ki sidebar ve içerik arasında bir boşluk yapmak istiyoruz. Bu durumda sidebar'a margin vermek gerekir. Bu durumda bu margin için genişliği bir yerden azaltmamız gerekecek. İçerikten azaltalım, buna bağlı olarak genişliğini küçültelim:

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

Şimdi yükseklik ekleyelim, çünkü elementlerimiz içerik içermiyor. Sadece bir elemente yükseklik vermek yeterli, çünkü ikinci flex elementi yüksekliğe uyum sağlayacaktır (neden?). İçeriğe yükseklik verelim:

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

Şimdi içerik ve sidebar'a kalan stilleri ekleyelim:

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

Hepsi, düzenimiz hazır. Tüm kodu bir araya getirelim:

<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;
}