Resimde görmüş olduğunuz footer kısmının en alta inmesi gerekiyor sidebar ve content bir kapsayıcı içerisinde bu kapsayıcının altına ekliyorum footeri ama nafiler her yere clear:both denedim ama olmadı bi çaresi var mıdır acaba ?
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Facebook - Timeline</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
:focus {outline:0;}
.clear {clear:both;}
img {border:none;}
body {background:#e9eaed;margin:0;padding:0;}
#wrapper {width:980px;margin:0 auto;}
#header {position:relative;}
#kapak {height:550px;background:#fff;overflow:hidden;}
#kapak img {width:980px;height:500px;}
#profil img {width:160px;height:160px;border:3px solid #fff;border-radius:5px;cursor:pointer;}
#profil {position:absolute;bottom:10px;left:20px;}
#menu ul {font:12px sans-serif;padding:0;margin:0;list-style:none;position:absolute;bottom:0px;right:0;height:45px;}
#menu ul li {float:left;border-right:1px solid #f0f0f0;}
#menu ul li a {text-decoration:none;color:#3b7dc1;display:block;padding:0 20px;line-height:45px;}
#menu ul li a:hover {background-color:#f6f7f8;}
.fav {color:#000 !important;}
.username {position:relative;bottom:50px;left:200px;font:50px;color:#fff;font:bold 25px arial;text-shadow:1px 1px #000;}
.username a {color:#fff;text-decoration:none;}
.username a:hover {text-decoration:underline;}
#page {margin-top:15px;}
#sidebar {float:left;width:400px;height:300px;}
#content {float:right;width:550px;height:300px;margin-left:10px;}
.ne_dusunuyorsun {border-radius:3px;border:1px solid #d3d6db;height:40px;background:#f6f7f8;border-bottom:none;padding:0;margin:0;line-height:0;}
.ozellik ul {margin:0;padding:0;list-style:none;font:bold 11px sans-serif;}
.ozellik ul li {float:left;}
.ozellik ul li a {color:#3b59a4;display:block;text-decoration:none;padding:0 15px;line-height:40px;}
.ozellik ul li a:hover {text-decoration:underline;color:#3b5998;}
li.durum {background:url("durum.png") no-repeat 20px;}
.durum1 {margin-left:30px;color:#000 !important;}
li.fotograf {background:url("fotograf.png") no-repeat 0px;}
.fotograf2 {margin-left:10px;}
li.yer {background:url("yer.png") no-repeat 0px;}
.yer2 {margin-left:10px;}
li.onemli_gelisme {background:url("onemli_gelisme.png") no-repeat 0px;}
.onemli_gelisme2 {margin-left:10px;}
.tekstarea {width:508px;resize:none;color:#777;border:1px solid #d3d6db;padding:0;margin:0;padding:20px;margin:0;overflow: auto;height:35px;font:12px sans-serif;}
.ozellikler {background:#f6f7f8;height:40px;border:1px solid #d2d3d6;border-radius:3px;border-top:none;width:100%;}
.ozellikler ul {padding:0;margin:0;list-style:none;line-height:0;}
.ozellikler ul li {float:left;}
.ozellikler ul li a {line-height:40px;padding:0 20px;display:block;}
.ozellikler ul li a:hover {background:#f0f2f2;}
.ozellikler .post {float:left;padding:0;margin:0;}
.ozellikler .post_gonder {float:right;}
.ozellikler .post_gonder a {text-decoration:none;font:11px sans-serif;line-height:40px;color:#808080;}
.ozellikler .post_gonder span {padding-left:5px;padding-top;}
.post_gonder ul li.paylas {height:22px;border:1px solid #3c5488;border-radius:3px;width:67px;font:bold 11px sans-serif;text-align:center;line-height:20px;background:#49649f;color:#fff;margin-right:10px;margin-top:7px;cursor:pointer;}
.durum_paylasim {background:#fff;border:1px solid #d2d3d6;border-radius:3px;margin:15px 0;}
.durum_bilgi {color:#b8bdb4;font:12px sans-serif;}
.profil_fotosu {width:40px;height:40px;border-radius:3px;float:left;}
a.profil_username {text-decoration:none;font:bold 12px sans-serif;color:#3b5998;text-decoration:none;padding:10px 0 0 10px;}
a.profil_username:hover {text-decoration:underline;}
a.profil_kapak {color:#3b5998;text-decoration:none;font:12px sans-serif;padding:0;margin:0;}
a.profil_kapak:hover {text-decoration:underline;}
p.durum_tarih {color:#b8bdb4;font:11px sans-serif;margin:0px;padding:0;background:url("gonderi_tarihi.png") no-repeat 109px;}
p.durum_tarih span {padding-left:10px;}
.durum_paylasim .durumKapak img {width:100%;height:200px;padding:0 !important;}
p.durumBaslik {font:12px sans-serif;padding-top:10px;margin:0;}
ul.durumBegenPaylas {padding:0;margin:0;list-style:none;height:32px;background:#fafbfb;border-bottom:1px solid #ebebeb;}
ul.durumBegenPaylas li {float:left;}
ul.durumBegenPaylas li a {text-decoration:none;font:11px sans-serif;line-height:32px;padding:0 15px;}
.thumb {padding:20px;}
ul.durumBegenPaylas li a span {vertical-align:middle;}
ul.BegenenlervePaylasanlar {padding-left:10px;margin:0;list-style:none;background:#fafbfb;height:30px;font:11px sans-serif;color:#3b5998;}
ul.BegenenlervePaylasanlar li {float:left;color:#4e5665;}
ul.BegenenlervePaylasanlar li a {text-decoration:none;line-height:30px;padding:0 2px;color:#3b5998;}
ul.BegenenlervePaylasanlar li a:hover {text-decoration:underline;}
.yorum_yap {background:#fafbfb;margin-bottom:15px;}
.yorum_yap img {float:left;width:32px;height:32px;border-radius:3px;margin-left:10px;}
.yorum_birak {border:1px solid #d3d7dc;resize:none;height:15px;overflow:auto;width:85%;margin-left:10px;padding:7px;font:11px sans-serif;background:url("foto.png") no-repeat 450px;box-shadow:inset 0px 0px 5px #ccc;}
ul.paylasanlar {list-style:none;padding:0;margin:0;}
ul.paylasanlar li a {background:url("paylasim.png") no-repeat 50px;padding-left:70px;}
#sol {float:left;width:600px;}
#en_ust{height:37px;width:100%;background:#3b5998;position:fixed;left:0;top:0;z-index:100;}
#kapsayici {width:980px;margin:0 auto;}
.facebookLogo {padding-top:8px;float:left;}
#sag {float:right;width:340px;margin-left:40px;}
ul#bildirimMesajArkadas{padding:0;margin:0;list-style:none;padding-top:12px;}
ul#bildirimMesajArkadas li{float:left;}
ul#bildirimMesajArkadas li a {padding:0 7px;}
#AraBeni {margin-left:20px !important;float:left;position:relative;bottom:5px;}
input {padding:0;margin:0;}
.ara{width:316px;height:23px;background:url("ara.png") no-repeat;border:none;float:left;font:11px sans-serif;padding-left:10px;}
.araBtn{width:24px;height:24px;background:url("ara.png") no-repeat -326px;float:left;border:none;cursor:pointer;}
img.imgSettings {width:23px;height:23px;vertical-align:middle;border:1px solid #123682;}
ul#settings {padding:0;margin:0;list-style:none;line-height:37px;}
ul#settings li {float:left;}
ul#settings li a {color:#cedfea;text-decoration:none;padding:0 7px;font:bold 11px sans-serif;border-right:1px solid #526da4;}
ul#settings li a:hover {color:#fff;}
.box {background:#fff;border-radius:3px;}
.title {background:#f6f7f8;color:#6a7480;padding:10px;font:bold 12px sans-serif;cursor:pointer;border-bottom:1px solid #d2d3d6;border-top-left-radius:3px;border-top-right-radius:3px;}
.title:hover {text-decoration:underline;background:#f9fafb;}
.box ul#info {padding:10px;margin:0;list-style:none;color:#81898f;font:11px sans-serif;}
.box ul#info li {border-bottom:1px solid #e9eaed;padding:10px;}
.box ul#info li:last-child {border-bottom:none;}
.box ul#info li a {text-decoration:none;font:11px sans-serif;color:#3b5998;}
.box ul#info li a:hover {text-decoration:underline;}
.is {background:url("is.png") no-repeat 0;padding-left:20px;}
.egitim {background:url("egitim.png") no-repeat 0;padding-left:20px;}
.sehir {background:url("sehir.png") no-repeat 0;padding-left:20px;}
.memleket {background:url("memleket.png") no-repeat 0;padding-left:20px;}
.abone {background:url("abone.png") no-repeat 0;padding-left:20px;}
ul#ozelMenu {position:absolute; bottom:70px;right:0;padding:0;margin:0;list-style:none;}
ul#ozelMenu li {
float:left;
background:-webkit-linear-gradient(top,#fdfdfe,#f1f2f3);
background:-moz-linear-gradient(top,#fdfdfe,#f1f2f3);
background:-ms-linear-gradient(top,#fdfdfe,#f1f2f3);
background:-o-linear-gradient(top,#fdfdfe,#f1f2f3);
padding:5px;border-radius:3px;
border:1px solid #fdfefe;
margin:0 5px;
}
ul#ozelMenu li a {display:block;text-decoration:none;color:#000;margin:0 20px;font:bold 12px sans-serif;}
ul#ozelMenu li a.arkadas_ekle {background:url("arkadas_ekle.png") no-repeat left;padding-left:20px;}
ul#ozelMenu li a.takip_et {background:url("takip_et.png") no-repeat left;padding-left:20px;}
ul#ozelMenu li a.mesaj_at {background:url("mesaj_at.png") no-repeat right;padding-right:20px;}
#taniyormusun {background:#fff;border:1px solid #d2d3d6;margin:20px 0;}
.baslik {background:#f6f7f8;padding:10px;}
.baslik a {color:#6a7480;font:bold 12px sans-serif;text-decoration:none;}
#taniyormusun p {padding:0;font:12px sans-serif;}
#taniyormusun p a {text-decoration:none;color:#3b5998;font:12px sans-serif;}
#taniyormusun p a:hover {text-decoration:underline;}
.ortala {padding:10px;}
ul#ortakArkadas {padding:0;margin:0;list-style:none;}
ul#ortakArkadas li {float:left;}
ul#ortakArkadas li a {border:none;padding:0 5px;color:#89919c;text-decoration:none;font:12px sans-serif;}
ul#ortakArkadas li a:hover {text-decoration:underline;}
ul#ArkEkle {padding:0;margin:0;list-style:none;float:right;}
ul#ArkEkle li {background:#67a54b;color:#ffF;border:1px solid #2c5115;padding:4px;}
ul#ArkEkle li a {color:#fff;font:bold 12px sans-serif;text-decoration:none;}
.arti_bir {background:url("arti_bir.png") no-repeat left;padding-left:20px;}
.solOrta {float:left;width:500px;}
.sagOrta {float:right;width:400px;}
#footer {background:#fff;clear:both;}
#footer ul {list-style:none;padding:0;margin:0;height:50px;background:#fff;}
#footer ul li {float:left;}
</style>
</head>
<body>
<div id="en_ust">
<div id="kapsayici">
<div id="sol">
<a href="index.html"><img src="logo.png" alt="Facebook Logo" class="facebookLogo" /></a>
<ul id="bildirimMesajArkadas">
<li><a href="#"><img src="arkadas_olarak_ekle.png" alt="" /></a></li>
<li><a href="#"><img src="mesajlar.png" alt="" /></a></li>
<li><a href="#"><img src="bildirimler.png" alt="" /></a></li>
</ul>
<form action="#" method="post" id="AraBeni">
<input type="text" class="ara" placeholder="İnsanları, yerleri ve diğer şeyleri ara" />
<input type="submit" value="" class="araBtn" />
<div class="clear"></div>
</form>
</div>
<div id="sag">
<ul id="settings">
<li><a href="#"><img src="2.jpg" alt="" class="imgSettings"/> Fırat Abak</a></li>
<li><a href="#">Arkadaşlarını Bul</a></li>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#"><img src="settings.png" alt="" /></a></li>
<li><a href="#"><img src="genel.png" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="header">
<div id="kapak">
<img src="1.jpg" alt="kapak" /> <span class="username"><a href="#">Fırat Abak (BilgeAdam)</a></span>
<ul id="ozelMenu">
<li><a href="#" class="arkadas_ekle">Arkadaşı Ekle</a></li>
<li><a href="#" class="takip_et">Takip Et</a></li>
<li><a href="#" class="mesaj_at">Mesaj</a></li>
</ul>
</div>
<div id="profil"><img src="2.jpg" alt="" /></div>
<div id="menu">
<ul>
<li><a href="#" class="fav">Zaman Tüneli</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Fotoğraflar</a></li>
<li><a href="#">Arkadaşlar</a></li>
<li><a href="#">Diğer</a></li>
</ul>
</div>
</div>
<div id="taniyormusun">
<div class="baslik"><a href="#">Fırat'ı tanıyor musun?</a></div>
<div class="ortala">
<div class="solOrta">
<p>Arkadaşlarıyla neler paylaştığını görmek için kendisine <a href="#">arkadaşlık isteği gönder.</a></p>
<ul id="ortakArkadas">
<li><a href="#"><img src="ortak_arkadas1.png" alt="" /></a></li>
<li><a href="#"><img src="ortak_arkadas2.png" alt="" /></a></li>
<li><a href="#">2 Ortak Arkadaş</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="sagOrta">
<ul id="ArkEkle">
<li><a href="#" class="arti_bir">Arkadaş Olarak Ekle</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="page">
<div class="clear"></div>
<div id="sidebar">
<div class="box">
<div class="title">Hakkında</div>
<ul id="info">
<li><a href="#" class="is">Web Designer & Front-End Developer</a>'de Freelance</li>
<li><a href="#" class="egitim">BilgeAdam</a>'da okudu</li>
<li><a href="#" class="sehir">Kartal, İstanbul</a>'da yaşıyor</li>
<li><a href="#" class="memleket">Memleketi </a>Mardin</li>
<li><a href="#" class="abone">284 </a> kişi takip ediyor</li>
</ul>
</div>
</div>
<div id="content">
<div class="ne_dusunuyorsun">
<div class="ozellik">
<ul>
<li class="durum"><a href="#" class="durum1">Durum</a></li>
<li class="fotograf"><a href="#" class="fotograf2">Fotoğraf</a></li>
<li class="yer"><a href="#" class="yer2">Yer</a></li>
<li class="onemli_gelisme"><a href="#" class="onemli_gelisme2">Önemli Gelişme</a></li>
</ul>
<textarea class="tekstarea" placeholder="Ne düşünüyorsun?"></textarea>
</div>
<div class="ozellikler">
<div class="post">
<ul>
<li><a href="#"><img src="etiket.png" alt="" /></a></li>
<li><a href="#"><img src="tarih.png" alt="" /></a></li>
<li><a href="#"><img src="konum.png" alt="" /></a></li>
<li><a href="#"><img src="ifade.png" alt="" /></a></li>
</ul>
</div>
<div class="post_gonder">
<ul>
<li class="herkese_acik"><a href="#"><img src="dunya.png" alt="" /> <span>Herkese Açık</span></a></li>
<li class="paylas">Paylaş</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="durum_paylasim">
<div class="thumb">
<img src="2.jpg" alt="" class="profil_fotosu"/>
<span class="durum_bilgi"><a href="#" class="profil_username">Fırat Abak</a>, <a href="#" class="profil_kapak">kapak fotoğraf</a>ını değiştirdi.</span>
<p class="durum_tarih"><span>7 Ağustos</span></p>
<div class="clear"></div>
<p class="durumBaslik">Say my name!</p>
</div>
<div class="durumKapak"><a href=""><img src="1.jpg" alt="" /></a></div>
<ul class="durumBegenPaylas">
<li><a href="#">Beğen</a> <span>.</span></li>
<li><a href="#">Yorum Yap</a> <span>.</span></li>
<li><a href="#">Gönderiyi Takip Et</a> <span>.</span></li>
<li><a href="#">Tanıtımını Yap</a> <span>.</span></li>
<li><a href="#">Paylaş</a> </li>
</ul>
<ul class="BegenenlervePaylasanlar">
<li><a href="#">Serap Parlak</a>,</li>
<li><a href="#">Özgür Tetikarslan</a>,</li>
<li><a href="#">Emra Kayrın</a>,</li>
<li><a href="#">Adamın Biri</a></li>
<li><a href="#">ve Diğer 10 kişi</a> bunu beğendi.</li>
<li>
<ul class="paylasanlar">
<li><a href="#"><span>47</span></a></li>
</ul>
</li>
</ul>
<div class="yorum_yap">
<img src="2.jpg" alt="Fırat Abak" />
<textarea class="yorum_birak" placeholder="Yorum yaz..."></textarea>
</div>
</div>
<div class="durum_paylasim">
<div class="thumb">
<img src="2.jpg" alt="" class="profil_fotosu"/>
<span class="durum_bilgi"><a href="#" class="profil_username">Fırat Abak</a></span>
<p class="durum_tarih"><span>7 Ağustos</span></p>
<div class="clear"></div>
<p class="durumBaslik">
Sana gitme demeyeceğim. <br/>
Üşüyorsun ceketimi al. <br/>
Günün en güzel saatleri bunlar. <br/>
Yanımda kal. <br/>
<br/>
Sana gitme demeyeceğim. <br/>
Gene de sen bilirsin. <br/>
Yalanlar istiyorsan yalanlar söyleyeyim, <br/>
İncinirsin. <br/>
<br/>
Sana gitme demeyeceğim, <br/>
Ama gitme, Lavinia. <br/>
Adını gizleyeceğim <br/>
Sen de bilme, Lavinia.
<br/><br/>
- Özdemir Asaf.
</p>
</div>
<div class="durumKapak"><a href=""><img src="siir.jpg" alt="" /></a></div>
<ul class="durumBegenPaylas">
<li><a href="#">Beğen</a> <span>.</span></li>
<li><a href="#">Yorum Yap</a> <span>.</span></li>
<li><a href="#">Gönderiyi Takip Et</a> <span>.</span></li>
<li><a href="#">Tanıtımını Yap</a> <span>.</span></li>
<li><a href="#">Paylaş</a> </li>
</ul>
<ul class="BegenenlervePaylasanlar">
<li><a href="#">Serap Parlak</a>,</li>
<li><a href="#">Özgür Tetikarslan</a>,</li>
<li><a href="#">Emra Kayrın</a>,</li>
<li><a href="#">Adamın Biri</a></li>
<li><a href="#">ve Diğer 10 kişi</a> bunu beğendi.</li>
<li>
<ul class="paylasanlar">
<li><a href="#"><span>47</span></a></li>
</ul>
</li>
</ul>
<div class="yorum_yap">
<img src="2.jpg" alt="Fırat Abak" />
<textarea class="yorum_birak" placeholder="Yorum yaz..."></textarea>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="footer">
<ul>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Reklam Oluştur</a></li>
<li><a href="#">Sayfa Oluştur</a></li>
<li><a href="#">Geliştiriciler</a></li>
<li><a href="#">Kariyer Olanakları</a></li>
<li><a href="#">Gizlilik</a></li>
<li><a href="#">Çerezler</a></li>
<li><a href="#">Koşullar</a></li>
<li><a href="#">Yardım</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>