Eşit Yükseklikte Kolonlar
October 17th, 2007, Yazar: 5ml, Kategori: CSS | Kalıcı Link |
Layout’umuz ister 2 kolonlu olsun, ister 3 kolonlu olsun, eÄŸer tablosuz tasarım yapacaksak aÅŸmamız gereken önemli bir sorun var: EÅŸit Yükseklikte Kolonlar
YüksekliÄŸini “otomatik” (height:auto) olarak ayarladığımız katmanların yükseklikleri, içlerine konulan içeriÄŸe göre deÄŸiÅŸkendir.
3 kolonlu bir tasarım yaptığımızı farzedelim. Sol kolonda 2 paragraf yazı, orta kolonda 10 paragraf yazı, saÄŸ kolonda da 4 paragraf yazı olsun. EÄŸer kolonların yüksekliÄŸini otomatik olarak belirlediysek hepsinin yüksekliÄŸi farklı olacaktır. Dolayısıyla eÄŸer arka plan resmi veya rengi verdiysek kötü bir görüntü oluÅŸacaktır. İşte bu sorunu çözmek için Mark Challoner‘in geliÅŸtirdiÄŸi oldukça pratik bir çözüm var:
Sol bloğumuz #solblok, sağ bloğumuz #sagblok, orta bloğumuzsa #ortablok adında katmanlar olsun. Ve bu 3 katman da #tasiyici adlı bir katmanın içerisinde yer alsın. Şu halde kodlarımız aşağıdaki gibi olursa 3 kolonumuzun yüksekliği de aralarından en uzununa eşit olacaktır.
Not: Aşağıdaki kodlar ilgili katmanların sadece sorunun çözümüyle ilgili css kodlarıdır.
#solblok,#sagblok,#ortablok{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#tasiyici{
overflow: hidden;
}
Sorunlu layout:

Düzeltilmiş layout:









