Son zamanlarda XHTML ve CSS ile tablosuz tasarımlar hazırlamaya iyice merak saldım. Kendi çapımda da bir şeyler oluşturmaya çalışıyorum. Ancak biliyorsunuz ki başta Internet Explorer 6 olmak üzere tüm browser uyumsuzlukları biz webciler için çile haline gelebiliyor. IE6 ile karşımıza çıkacak problemlerden biri de Padding. Google’da Box Model Hacking araması ile bazıları işe yaramasa da bir çok farklı yöntem bulabilirsiniz. Ben ise bugün başka bir yöntemden bahseceğim. Byte israflı ama işe yarar bir yöntem.

Öncelikle 2 sütunlu bir şablon oluşturalım:

<div class=”govde”>
 <div class=”sol”>
  sol alan içeriği
 </div>
 <div class=”sag”>
  sag alan içeriği
 </div>
</div>

Bunun için gerekli CSS dosyası da şöyle olsun:

.govde { width:800px; }
.sol { width:590px; float:left: background:#cccccc; }
.sag { width:200px; float:right: background:#999999; }

Eğer sayfamızı bu şekilde çalıştırırsak, içerik yazılarımız sol ve üste yapışık çıkacak. Bunu önlemek için “sag” ve “sol” adlı class’lara padding-left:5px; padding-top:5px; ekleyebiliriz. Ancak bu şekilde Firefox iki alandaki padding’leri alanların width’lerini ekleyecek. 800px alana sığmadıkları için sag alan, sol alanın altına kayacak. İşte bunu engellemek için şu yöntemi uygulayacağız:

Öncelikle CSS dosyamıza yeni bir satır ekleyeceğiz

.padding5 { padding-left:5px; padding-top:5px; }

Ardından şablon dosyamızı aşağıdaki gibi güncelleyeceğiz

<div class=”govde”>
 <div class=”sol”>
  <div class=”padding5″>
   sol alan içeriği
  </div>
 </div>
 <div class=”sag”>
  <div class=”padding5″>
   sag alan içeriği
  </div>
 </div>
</div>

Böylece alanlarımıza padding vereceğiz ancak padding div’lerinin genişlik veya yükseklik değerleri olmadığı için hiçbir şekilde kaymayacak. Bu şekilde farklı ölçülerde padding class’ları hazırlayıp CSS dosyanıza ekleyebilirsiniz. Darısı margin‘in başına..