Bu Tabloyu Div'lerle Nasıl Yapabiliriz?

Arkadaşlar, hoca bu tabloyu verdi, div kodları ile oluşturacağız. 1. ve 2. kutucuğu yapıyorum ama 3. veya 4. kutucuğu yapamıyorum. 3'ü yapsam 4'ü yapamıyorum, 4'ü yapsam 3'ü yapamıyorum, yardım eder misiniz lütfen?

Şu kodları kopyala ve kullan.
Ancak incelersen nasıl yapıldığını kolayca kavrarsın.

CSS:

.kapsayici {
	width: 1170px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.kapsayici .ust {
	float: left;
	height: 200px;
	background-color: #999;
	width: 100%;
}
.kapsayici .sol {
	float: left;
	width: 20%;
	background-color: #990;
	height: 500px;
}
.kapsayici .sol .sol-ust {
	background-color: #CCC;
	height: 250px;
	width: 100%;
}
.kapsayici .orta {
	float: left;
	width: 60%;
	background-color: #FC0;
	height: 500px;
}
.kapsayici .sag {
	float: left;
	width: 20%;
	background-color: #3CF;
	height: 500px;
}
.kapsayici .sol .sol-alt {
	background-color: #C9C;
	height: 250px;
	width: 100%;
}

HTML: 

<div class="kapsayici">
	<div class="ust"></div>
	<div class="sol">
		<div class="sol-ust"></div>
		<div class="sol-alt"></div>
	</div>
	<div class="orta"></div>
	<div class="sag"></div>
</div>
Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git