<div class="kapsul">
  <div id="ustAlan"> Üst alan
</div>
<div id="solAlan">Menü</div>
<div id="icerikAlani">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum. Duis ullamcorper odio. Fusce condimentum. Aliquam id felis volutpat pede adipiscing sollicitudin. Cras id dolor. Suspendisse ut urna at ipsum porta lobortis. Sed commodo quam et massa ornare fringilla. Cras auctor purus id tortor. Fusce sed neque. Aenean elit magna, vestibulum a, ornare quis, facilisis ac, arcu. Proin fermentum condimentum risus. Suspendisse potenti. Etiam libero nisl, tempor eget, sodales ut, fringilla ac, erat. Aenean quis tellus. Nam imperdiet, ipsum eget commodo mollis, purus turpis ultricies mi, tempus nonummy ligula elit quis libero. Nam lobortis. Curabitur magna sapien, dictum at, iaculis id, tempor at, sem.

<p>Sed adipiscing, orci non hendrerit eleifend, ipsum ligula ultrices augue, vitae euismod felis purus blandit turpis. Vestibulum lobortis sagittis elit. Mauris ultricies, arcu quis scelerisque hendrerit, nunc magna semper risus, ac laoreet ante est ac quam. Nunc hendrerit, nulla non lobortis sagittis, leo dui rhoncus neque, iaculis fermentum nulla enim nec eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit. In dignissim risus ut pede. Ut pulvinar adipiscing odio. Nam euismod turpis id arcu. Sed et lorem hendrerit mi mattis aliquet. Phasellus ultricies, purus sit amet molestie faucibus, dui lectus tempor felis, vel ultricies libero metus vel justo. Cras commodo turpis in ligula. </p>
</div>
<div class="tampon"></div>
</div>
<div id="altAlan">
  <p>Alt Kısım</p>
</div>
* {
	margin: 0;
}
html, body {
	height: 100%;
}

body{
	background:#F78200 url(http://fatihhayrioglu.com/dokumanlar/images/genel_zr.gif) top left repeat-y;
	font-size:62.5%;
	font-family:Arial, Helvetica, sans-serif;
}

/* usalan tanimlari */
#ustAlan {
	height: 6.4em;
	background-color:#CCCCCC;
}

/* icerik alani */
.kapsul {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em; /* footer yukseklik degeri ile ayn olmali */
}

#solAlan {
	float: left;
	clear:both;
	width: 15em;
	height: 15em;
	margin-bottom: 1em;
}

#icerikAlani {
	margin: 0 0 1em 16em;
	font:1.1em Arial, Helvetica, sans-serif;
}

#icerikAlani:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#icerikAlani {
	display: inline-block;
}

* html #icerikAlani {
	height: 1%;
}

#altAlan, .tampon {
	height: 4em; /* .tampon ile altAlan yuksekligi ayni olmali */
}

#altAlan{
	text-align:center;
	color:#036;
	background-color:#cfc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.