CSS’de kolon yüksekliklerini eşitlemek

Geçerli HTML, CSS kodlama gibi kavramlar hayatımıza girdiğinden beri hepimizin bildiği bir gerçek var: “Sayfa tasarımında tablo kullanmamalıyız!”

Gerçekten de CSS, tabloların sayfa tasarımında yapabilecekleri pek çok şeyi daha kolay bir biçimde yapma imkanı sunuyor. Haliyle tablo yapısını yalnızca veri listelerken kullanmak, sayfa tasarımını CSS’le gerçekleştirmek çok daha mantıklı oluyor.

Her şey güzel gibi. Fakat tablolarla kolaylıkla gerçekleştirebileceğimiz, fakat CSS’te gerçekleştirmekte çok zorlandığımız bir şey var: Yan yana bulunan kolonların yüksekliklerini eşitleyebilmek.

CSS’de ek bir yöntem kullanmadan bu isteğimizi gerçekleştiremiyoruz. Bu gerçekten çok büyük bir eksiklik ve tablo sisteminden CSS’e geçenlerin afallamalarına sebep oluyor. Hemen herkes, bu durumla ilk karşılaştığında, “Bir yolu mutlaka vardır.” diyerek değişik yöntemler deniyor, ancak eninde sonunda gerçeği fark ediyor.

CSS ile hazırladığımız sütunlara birer uzunluk değeri vermezsek (ki çoğunlukla veremiyoruz), sütunlar içlerindeki yazının uzunluğuna göre uzuyorlar. Eğer yan yana dizilen sütunlarda bulunan yazıların uzunlukları farklıysa, sütunların uzunlukları da farklı oluyor. Bu da göz estetiğine aykırı bir durum oluşturabiliyor.

Aşağıdaki HTML formatındaki örneklerde söylemek istediğimizi daha rahat anlayabilirsiniz:

[1]. Tablo ile hazırlanmış sütunlar
[2]. CSS ile hazırlanmış sütunlar

Peki bu eksikliği giderebilmek için ne yapabiliriz? Yeniden tablolarla tasarım yapmaya mı başlayalım? Elbette hayır. Bu problemi aşmak için kullanabileceğimiz değişik yöntemler var. Ancak başlarken hatırlatalım: Çevrenizde CSS’in tablo ile yapılabilecek “her şeyi” yapabileceğini söyleyenler olursa, bu konuyu hatırlatmaktan kaçınmayın.

Faux Columns (Sahte sütunlar)

Dan Cederholm’un A List Apart’da yazdığı Faux Columns yazısında açıkladığı bu yöntem, kolon yüksekliklerini eşitlemede en sık kullanılan yöntemlerden biri. Bu kadar sık kullanılıyor olmasının temelde tek bir sebebi var: Çok basit uygulanabiliyor!

Yöntemin çalışma mantığı şu: Eşit uzunlukta olmalarını istediğiniz sütunları kapsayan bir div açıyor ve bu div’e aşağıdaki gibi bir zemin resmi atıyorsunuz:

Zemin resminin uzunluğu 1-2 pikseli geçmiyor ama sütunların yüksekliği arttıkça bu resim de uzuyor.

Örneğimizde, içerideki 3 kolonu kapsayan div’in stiline aşağıdaki kodu ekliyoruz:

background: #ccc url(../zeminresim.jpg) repeat-y 50% 0;

Burada dikkat etmemiz gereken bir nokta var: Eğer içerideki div’lere float:left değerini vermişsek, dışarıdaki div’e de aynı değeri vermemiz veya hemen altına yeni bir div oluşturarak kendisine clear: both değeri eklememiz gerekiyor. (msevim’in CSS’de eşit boyutlu kolonlar‘daki ipucu)

Hepsi bu kadar. Çalışan örneğe bir göz atabilirsiniz: Faux Columns yöntemi.

Faux Columns yöntemi oldukça kolay ve kullanışlı gibi görünüyor. Peki öyleyse neden başka yöntemlere de ihtiyaç duyabiliriz? Bunun en önemli sebebi, kolayca fark edebileceğiniz gibi, Faux Columns yönteminin dinamik sayfalara uygun olmaması.

Basit CSS yöntemi *

Bu yöntemde, en azından başlangıçta, zemin resmine ihtiyaç duyulmuyor. Kolon yüksekliklerini eşitleyebilmek için aşağıdaki adımları takip ediyoruz:

1. Kısa kolonların, en uzun kolondan daha uzun olabilmesi için, bütün kolonlara yüksek bir padding-bottom değeri atıyoruz. Bu değeri kendiniz belirleyebilirsiniz. Bu adımı gerçekleştirince elimizde şöyle bir örnek oluşuyor:

Birinci Örnek

2. Daha sonra, tarayıcının, sütunların hâlâ içeriklerinin uzunluğu kadar uzun olduklarını düşünmesini sağlamak için negatif margin-bottom değeri veriyoruz. Bundan sonra, dışarıdaki div’e padding sebebiyle oluşan aşmayı engelliyoruz (overflow: hidden;).

İkinci Örnek

3. Buraya kadar her şey güzel gidiyor. Peki ya sütunlara kenarlık eklemek istersek? Burada işler biraz karışıyor. Önce sütunların arasına boşluk ekliyoruz (margin-right işinizi görebilir). Sonra her sütuna birer border ekliyoruz. Normalde bu kadar işlem yetecekti. Ancak eklediğimiz padding-bottom, alt border’ın görünmesine engel oluyor.

Üçüncü Örnek

4. Yılmıyoruz. Alt border’ı taklit etmek için Faux Columns’taki gibi bir resim hazırlıyor ve bunu dıştaki div’in zeminine ekliyoruz. (bottom, center) Eğer zemin resmi ile overflow’u aynı taşıyıcı div’e eklersek, zemin resmi görüntülenmiyor. Bunun için Dışarıdaki div’in içine bir başka div daha açarak overflow kuralını buna atıyoruz.

Son olarak dışarıdaki div’in alt border’ı için hazırladığımız resmin görünebilmesi için padding-bottom’ı 1 px (border genişliğine göre arttırılabilir) olarak ayarlamalıyız. Böylece border’ları olan eşit yükseklikte sütunlarımız hazır.

Dördüncü Örnek

JS yöntemleri

JS ile kolon yüksekliklerini eşitlemenin çeşitli yolları var. Dynamic Drive’ın JS yöntemi gibi çeşitli yöntemleri internette bulabilirsiniz. Burada bu yöntemlerden bahsederek sözü uzatmayacağız.

Yöntemleri uygulamada bir sıkıntı yaşarsanız, yorum yazarak belirtebilirsiniz.

* Basit CSS yöntemi, Ejeliot’tan alınmıştır. Bu yöntemin geniş açıklamalı orijinali One True Layout‘ta bulunabilir.
HTML examples of Ejeliot’s Way taken from Ejeliot web site.