CSS ve XHTML tasarım hayatımızın içine öylesine girdi ki, HTML’de tablo kavramını yavaş yavaş unutuyor olduk. Yine de o zamanlardan kalma bazı özellikleri de özlemiyor değiliz. Onlardan biri de, her web tasarımcısının muhakkak aşina olduğu, çok kolonlu tasarımlarda kolonların boyutlarını eşit tutamama durumu. Ne yazık ki CSS şu anki haliyle yan yana yerleştirilmiş div’lerin boyutlarının içeriğe göre otomatik olarak uzamasına izin vermiyor. En azından bildiğimiz şekliyle ;)

Tasarımımızda yan yana üç kutumuz olduğunu düşünelim. height elementi ile kolonların uzunluğunu önceden belirlemezsek, bu üç kutunun boyutları içeriğe göre değişecektir;

Fakat tasarımımızın gereksinimlerine göre, üç kolonun boyutunun en uzun kolonunkine göre otomatik olarak uzatılması gerekebilir. Kelimelerin bittiği yerde, işler yine resimlere düşüyor;

Faux Columns

‘Faux Columns‘ methodu, bu konuda en çok kullanılan methodların başında geliyor. Aslında konsept çok basit: Tüm div’leri kaplayan bir ana kutu oluşturuyor ve bu kutuya üç kolonu kaplayan, 1 piksel yüksekliğinde bir arkaplan resmi atıyoruz. Diğer üç kolonu içeren bu kutunun boyutu içeriğe göre otomatik olarak uzayacağından dolayı, arkaplan sorunumuz da çözülmüş olacak. Örnek için tıklayınız.

Lütfen unutmayın: ana kutunun içerisinde bulunan 3 kutuya float:left; efekti uygulandığından, kapsayıcı div’imiz ilk adımda otomatik olarak uzamayacaktır. Bunun için kapsayıcı kutuya da float:left; efektini atayabilir, veya hemen altında yeni bir div oluşturarak kendisine clear:both özelliğini ekleyebilirsiniz.

Diğer Metodlar

Bu en çok kullanılan ve en kolay yöntem olsa da, aynı sonuca ulaşmanın farklı yolları da yok değil. Örneğin kolon genişliklerinin elastik olmasını ve tarayıcı boyutuna göre otomatik olarak değişmesini istiyorsanız, belirli genişlikteki arkaplan resimleri size ne yazık ki yardımcı olamayacaktır. Bu durumda internette dolaşan birçok JS kodunun yardımını alabileceğiniz gibi, Ed Eliot tarafından yazılmış olan bu güzel makaleye de göz atabilirsiniz.

Etiketler: css, kolon uzunluğu, xhtml