CSS ile kolonlar (column) oluşturmak zor olmayan bir şey. Ancak sütunlarınız dinamik bir şekilde oluşuyorsa ve CMS ‘niz kodlarla oynamanıza pek izin vermiyorsa aşağıdaki resimdeki gibi taşmalar söz konusu olabilir.
Uneven Columns with CSSNormal şartlarda (koda elle müdahele edebileceğiniz basit bir yapıya sahipseniz) son sütuna özel stil tanımlayıp sorundan kurtulabilirsiniz.Peki dinamik bir yapıda çalışıyorsanız bu sorunun nasıl üstesinden geleceksiniz?Çözüm
Sırasız listeyi(unordered list) sarmalayarak (wrapping) taşan marginleri saklamak!

Demoyu incelemek için tıklayın
Uneven Columns with CSSHTML
Sırasız listeyi genişliği belirlenmiş bir başka div içine yerleştiriyoruz. İşin sırrı overflow:hidden; kullanarak sağdan oluşan taşmayı saklamakta.

  • Column 1

  • Column 2

  • Column 3



CSS
Şimdi de sütunumuzun genişliğini padding ve marginleri de işin içine katarak hersaplayalım.Örneğin 970 px’lik bir genişliğe üç kolon yerleştirmek istiyorsunuz. Hesabımızı şöyle yapıyoruz:(En büyük genişlik+Sağ margin) / Kolın sayısı -(Sağ ve sol paddingler+ Sağ margin) = Kolon genişliği(970px + 10px) / 3 – (40px +10px) = 276px.container {margin: 0 auto;width: 970px;overflow: hidden;
}ul.col3 {width: 980px;
margin: 20px 0;padding: 0;list-style: none;float: left;}ul.col3 li {float: left;background: #fff;width: 276px;padding: 10px 20px;margin: 5px 10px 5px 0;}
Sonuç
Bu çözüm taşmaları önleyecek metot dışı bir hile aslına bakarsanız. Bu durumda :first-child ve :last-child pseudo-classlarını kullanmak daha doğru olabilirdi. Ancak büyük tarayıcılar bu özellikleri desteklemediği için bu çözüm geçici olarak bir kurtarıcı olabilir.Kaynak: Soh Tanaka