Denk geldiğim CSS sorunlarının buyuk bir coğunluğu, oluşturulan tabloların ( Elementlerin ) yerleşimlerinde meydana gelen kaymalar olduğu dikkatimi cekti. Bunların coğunun kaynaklanma nedeni atadıkları width değerleri ile alakalı oluyor.

Boyle bircok sorunla karşılaştım. Cozumleri aslında cok basit. Sadece yeni başladıkları icin olsa gerek width değerlerini yorumlarken bazen yanlışlıklar yapıyorlar.

Mesela iki element oluşturdunuz ve bunlar bir turlu yanyana gelmiyor. Soldaki elementin width değeri 100, sağdakinin ise 300 olsun. Oysaki float değerleri atamıştınız. O elementlerin ozellikleri olarakta width, margin, padding, border değerleri de belirttiniz.

HTML:
.ana .sol .sag

Bunların yanyana geleceğini duşunebilirsiniz. Cunku sol tarafın width değerini 100, sağ tarafınınkini ise 300 olarak belirledik.

HTML:
Sol Bolum
Sağ Bolum



Ancak bunların yanyana olacak şekilde sayfada konumlanmasını bekleyemeyiz.
Cunku bir elementin asıl toplam width değeri ( Genişliği ), o elementin sahip olduğu sol margin, sag margin, sol padding, sağ padding, sol border, sağ border değerlerinin de toplamıda demektir.

Yani burada sag bolumun asıl genişliği 300 + 4 + 6 + 2 = 312 px'tir. Yan yana gorunmesini sağlamak icin width değerini 288px olarak ayarlarsak sorun ortadan kalmış olur.

HTML:
.ana .sol .sag

Bu tarz sorunlarla karşılaşmamak icin bir tavsiyem var. En azından ben o şekilde calışıyorum.

Siteyi kodlamaya gecmeden once bir kağıt uzerinde taslak olarak ciziyorum. Width değerlerini de belirtiyorum. Daha sonra kodlamaya geciyorum ve herşeyi adım adım yapmaya calışıyorum. Boylece karışık tasarımlarda zorlanmayacağınızı duşunuyorum.