Tekrarlanan Kolonlarda Margin ve Padding Taşmasından Kurtulmak

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.

Normal ş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

HTML

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.

<div class="container">
<ul class="col3">
	<li>
		<h2>Column 1</h2>
	</li>
	<li>
		<h2>Column 2</h2>
	</li>
	<li>
		<h2>Column 3</h2>
	</li>
</ul>
</div>

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 bir kurtarıcı olabilir.

NOT: Bu yazıyı Soh Tanaka sitesinden Türkçe’ye çevirdim.