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:
