Yukarıdaki yapıda, eğer kolonlardan herhangi birinin yüksekliği artarsa,en dışarıdaki kapsayıcı katmanın da yüksekliği eşit oranda artacaktır. İşte bunu Float uygulayarak sağlıyoruz. Eğer dış katmanımıza float uygulamazsak kolonların yüksekliğinden etkilenmeyecek ve sıfır yüksekliğe sahip olacaktır.

Şimdi yapıyı biraz değiştirelim. Şöyleki; En dışa içerideki kolon sayımız kadar iç içe kapsayıcı katman ekleyeceğiz ve renklerimizi bu katmanlara atayacağız.

xhtml yapı

<div id="kapsayici3">
  <div id="kapsayici2">
    <div id="kapsayici1">
      <div id="kolon1">
        Sütun 1
      </div>
      <div id="kolon2">
        Sütun 2
      </div>
      <div id="kolon3">
        Sütun 3
      </div>
    </div>
  </div>
</div>

CSS

#kapsayici3 {
float:left;
width:100%;
background:blue;
}
#kapsayici2 {
float:left;
width:100%;
background:yellow;
}
#kapsayici1 {
float:left;
width:100%;
background:red;
}
#kolon1 {
float:left;
width:30%;
}
#kolon2 {
float:left;
width:40%;
}
#kolon3 {
float:left;
width:30%;
}

Yukarıdaki yapıda bütün elemanlarımıza float atadık (left). Kapsayıcılarımıza ise genişlik olarak 100% verdim. Sayfayı tam olarak kaplıyorlar. Arkaplan renklerini ise kolonlardan alıp kapsayıcılara verdim.

Şu an için sadece kırmızı renkli kapsayıcımız gözüküyor (kapsayici1). Şimdi diğer renkli kolonlarımızı da görebilmek için, kapsayici1 ve kapsayici2 id’li katmanlarımızı relative pozisyonlama kullanarak yeni yerlerine atıyoruz. Bunun için kapsayici2 katmanına sağdan 30%, kapsayici1 katmanına da yine sağdan 40% boşluk veriyoruz.

CSS

#kapsayici3 {
float:left;
width:100%;
background:blue;
}
#kapsayici2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#kapsayici1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#kolon1 {
float:left;
width:30%;
}
#kolon2 {
float:left;
width:40%;
}
#kolon3 {
float:left;
width:30%;
}

Şu an için renkli kolonlarımızı görebiliyoruz ancak bu sefer de içeriklerimizi tutan kolonlarımızdan sadece kolon3′ün içeriği gözükmekte. Bunları tekrar yerlerine yerleştirmeliyiz. Ayrıca Internet Explorer’da overflow:hidden‘ın çalışması için en dış katmanımıza (kapsayici3) relative pozisyonlama uyguluyoruz.

CSS

#kapsayici3 {
float:left;
width:100%;
background:blue;
overflow:hidden;
position:relative;
}
#kapsayici2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#kapsayici1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#kolon1 {
float:left;
width:30%;
position:relative;
left:70%;
}
#kolon2 {
float:left;
width:40%;
position:relative;
left:70%;
}
#kolon3 {
float:left;
width:30%;
position:relative;
left:70%;
}

Yukarıda görüleceği üzere içeriğimizi tutan kolonlarımıza soldan 70% lik bir girinti verdik. Böylece hizalama sorununu da ortadan kaldırmış olduk.

Şimdi ise kolonlarımıza 2% lik padding değeri ekleyeceğim. Yalnız bunu yaparken de yerleşimimde bu değere göre bir iki ufak değişiklik yapacağım.

Burada Internet Explorer’ın, kutu modelini (Box Model) yanlış yorumlamasını da dikkate alarak bir çözüm üreteceğiz.

Aslında kolonlarımızı biraz daha dar yapacağız. Vermek istediğimiz padding değeri 2% ‘ydi. Bunun yerine sağ ve soldan bu 2%’lik değeri dikkate alarak, genişliği 30% olan kolon1 ve kolon3′ün genişliğini 26% (soldan 2% + sağdan 2% = toplam 4%), genişliği 40% olan kolon 2′nin genişliğini de aynı mantıkla 36% olarak alıyorum.

Relative pozisyonlama kullanarak da soldan kolon1 için 72%, kolon2 için 76%, kolon3 için ise 80%’lik bir boşluk veriyorum. Bu hizalamada yine 2% lik padding değerlerini dikkate alıyoruz.

Ekstra geniş bir içeriğin (mesela geniş bir resim) bütün yapıyı bozmaması için, her bir kolona overflow:hidden; ekliyorum.

Son olarak CSS kodumuz aşağıdaki gibi oldu;

CSS ile Eşit Sütunlar

#kapsayici3 {
float:left;
width:100%;
background:blue;
overflow:hidden;
position:relative;
}
#kapsayici2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#kapsayici1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#kolon1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#kolon2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#kolon3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}

Evet sonunda yapımızı oluşturduk. Eğer bu yapıyı % yerine belirli değerlerle oluşturmak isterseniz; en dışa genel bir kapsayıcı katman oluşturmanız gerekiyor. Bu katmana vereceğiniz genişlik değerine göre, içeride aynı yapıyı hiç bozmadan tekrar oluşturabilirsiniz.

Bu yolun dışında, yine hiç resim kullanmadan, ki daha önce bir iki projede kullanmış olduğum ve gayet başarılı bulduğum farklı bir yöntem daha var. Yöntem de javascript kullanılıyor. Kaynak kodlarına bu adresten ulaşabilirsiniz.

Matthew James Taylor‘ın yazdığı “Equal Height Columns with Cross-Browser CSS” isimli makaleden yararlanılmıştır.
Teşekkürler..