Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.

Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.

Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.

Eksi Margin’i iki yerde uygularız.

• Sabit konumlandırılmış elemanlarda
• Float uygulanmış elemanlarda

1- Sabit Elemanlar ve Eksi Margin

1.1. Ard Arda Statik Elemanlar

Herhangi bir konumlandırma ataması yapılmayan tüm elemanlar sabit konumlandırılmıştır.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1"></div>
<div id="kutu2"></div>

Örnke kodu görmek için tıklayınız.

Normal akış içindeki iki kutu bir birini takip eder. Biz burada birinci kutuya eksi margin atarsak örneğin alttan -20px gibi.

Alttaki kutuyu kendi üzerine doğru 20px çekecektir.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-bottom:-20px
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Eğer ikinci kutuya yukarıdan eksi margin verirsek

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

Aynı görüntüyü alırız. Burada bu örneği vermemin amacı, eksi değer üst ve soldan verilirse eleman kendini yukarı veya sola çekecektir. Ancak elemana sağ ve alt eksi değeri verildiğinde kendi yerinden oynamazken ilişkili elemanı kendine doğru çekecektir. Yani üst/sol eksi değerlerde kendi hareket ederken, alt/sağ eksi değerlerde diğer elemanları kendine çekiyor.

1.2. Başlıklar ve içerikler Arasındaki mesafeyi Ayarlamak İçin Eksi Margin kullanmak

Başka bir örnek yapalım. Genelde sitelerin içeriklerini girerken başlık ve içerik şeklinde gireriz. Başlıklar için h1, h2, h3, h4, h5, h6 kullanırız. Bu bize arama motorları içinde avantaj sağlar. 

Normal bir içerik ve başlık kullanımına örnek verelim.

<p>Integer sagittis ... elementum. </p>
<h1>Donec id ultricies mi.</h1>
<p>Lorem ipsum ... eros.</p>

Görünüm aşağıdaki gibi olacaktır

Genel kullanımda başlık ile içerik arasındaki boşluk, başlık ile üst elemanlarda ile olandan daha azdır. Biz bunu sağlamak için h1′e margin-bottom:0 değeri versek de yeterli gelmez. Paragrafın(p) üst margin değeri aradaki mesafeyi açık gösterecektir. Bu durumu engellemek için başlıktan sonra gelen paragraflara bir sınıf atayıp bu paragrafların margin-top değerini düşürmeliyiz veya sıfırlamalıyız.

Bir başka çözüm yolu ise ki bu daha kolaydır ve genelde tercih edilir. Başlık etiketinin alt margin değerine eksi değer vererek paragraf yaklaştırılır. 

h1{
    margin-bottom:-20px
}

1.3. Statik elemanlarda bir başka durumda kutuların iç içe olma durumunda vardır.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px
}

<div id="kutu1">
    <div id="kutu2"></div>
</div>

İçteki kutuya sağdan ve soldan eksi değerler verdiğimizde dış kutunu genişliğini otomatik olarak alan içerideki kutu sağ ve soldan verilen eksi kenar dışı boşluk değerleri kadar dışa taşacaktır.

Örnke kodu görmek için tıklayınız.

Ancak burada farklı tarayıcılarda farklı sorunlarımız ortaya çıkacaktır. ie6 da her iki yana taşan kısımlar gözükmezken, ie7′de sadece sağ kısım görünmemektedir.

ie7′de yukarıdaki gibi görünüyor.

ie6′da ise yukarıdaki gibi görünmektedir.

Bu durumu düzeltmek için düzeltme kodu yazmalıyız. ie7 için min-height:0 tanımı yeterlidir.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
    min-height:0
}

ie6 için ise daha farklı bir kod yazmalıyız.

#kutu1 {
    width:200px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
}
* html #kutu2{
    position:relative;
    height:1px
}

Örnke kodu görmek için tıklayınız.

Bu kodlama sayesinde tüm tarayıcılarda aynı sonucu elde ederiz. Bu örnekten şu sonucuda çıkarabiliriz; genişliği verilmeyen elemanlarda eksi margin eleman genişliğini arttırır, bir bakıma padding görevi görür.

2- Eksi Margin ve Float

Float uygulanmış iki elemanı düşünelim.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.
</div>
<div id="kutu2">
	Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.
</div>

Birinci kutuya sağ eksi margin verdiğimizde

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-right:-50px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Birinci kutu ikinci kutuyu kendine doğru çekecektir. Birinci kutu genişliği ve konumunda herhangi bir değişiklik olmayacaktır.

Farklı durumlarda farklı sonuçlar çıkacaktır. Örneğin,

Birinci float:left ikinci kutu float:right değeri verdiğimizde iki kutu arasında herhangi bir eksi değer etki etmiyor.
Her ikisine float:right tanımladığımızda ise, soldan eksi margin değeri yukarıdaki etkiyi yapıyor.

Peki bu bilgi bizim ne işimize yaracak derseniz. http://www.alistapart.com/articles/negativemargins/ örnekteki gibi esnek yapılı bir sayfa planında sabit yapılı bir sağ veya sol alanlar oluşturmak istediğimizde yarar.

Örneğin %100 genişlikteki bir içerik alanımızı sağ yanına 200px lik bir sağ kolon eklemek istersek, yukarıdaki kodu devam ettirmemiz yeterli olacaktır.

#kutu1 {
    float:left;
    width: 100%;
    height: 100px;
    background-color:#e5ecf9;
    margin-right:-200px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

<div id="kutu1">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.</p>
</div>
<div id="kutu2">
	<p>Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.</p>
</div>

%100 içeriği sağ kolonun altında kalıyor. Bunu engellemek için içeriğindeki paragrafa sağ margin değeri atamalıyız.

#kutu1 p{
    margin-right:220px
}

Normalde 200px yeterli olacaktı ancak içerik ile sağ kolon arasına 20px lik bir mesafe koyarak birbirine yapışmasınıda engellemiş olduk.

Sağ ve sol kolon diye bir ayrım yapmak içinde soldaki kolonun ardalan rengini kaldırıp içindeki paragrafa vererek bu sorunu çözebiliriz.

#kutu1 {
    float:left;
    width: 100%;
    margin-right:-200px
}
#kutu1 p{
    margin:0 220px 0 0;
    height: 100px;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Float uygulanmış iç içe elemanlara eksi margin uygulamak

Yukarıda yan yana elemanlardaki durumu gösterdik peki iç içe elemanlarda eksi margin kullanımda nasıl sonuçlar çıkacaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 50px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

  <div id="kutu1">
  <div id="kutu2">Donec id ultricies mi.</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

Örnke kodu görmek için tıklayınız.

Birinci kutu içerisinde sağa hizalanmış ikinci kutuyu sağa doğru birinci kutu dışarısına çıkararak bir çok uygulamada işimizie yaracaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 80px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -50px 0 0
}
* html #kutu2{
    position:relative;
}

Örnke kodu görmek için tıklayınız.

Bir başka uygulama şeklide

Bir içerik ve başlığı normal şekilde normal akış içerisinde iken

#kutu1 {
    float:left;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    padding:0 20px
}
#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

<div id="kutu1">
    <h2>Donec id ultricies mi.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor vehicula nisl, et tincidunt sapien venenatis quis. .. felis.</p>
</div>

Örnke kodu görmek için tıklayınız.

Ancak buradaki başlığı kutu dışına alarak farklı bir görünüm elde edebiliriz.

#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

ve tabi ie 6 için

* html #kutu1 h2{
	position:relative; height:1px
}

Eksi Margin Uygulamaları

• Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması
• CSS ile gölge vermek

Ayrıca

Eksi margin Kullanarak çoklu kolon oluşturmak adlı güzel bir makale var.

Sonuç

Sonuç olarak eksi margin bir çok uygulamamızda kullanacağımız bir özellik. Genelde farklılıkları ile ön plana çıkan bir özelliktir. Ben burada eksi margin’i tanıttım ve genel bilinen uygulamalarını yaptım ve bir kaçına link verdim. Buradaki bilgiler ışığında daha bir çok uygulamamızda eksi margin’i kullanmaya devam edeceğiz.

Kaynaklar

• http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• http://www.brunildo.org/test/NegMOutH.html
• http://csscreator.com/node/1703 (ie sorun düzeltme)
• http://www.communitymx.com/abstract.cfm?cid=B0029 (bilgi)
• http://www.alistapart.com/articles/negativemargins/ (Uygulama)
• http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/ (ayrıntılı bilgi)
• http://www.bennadel.com/blog/1174-Negative-CSS-Margins-Are-Not-Cool.htm (karşı çıkış)
• http://haslayout.net/css/negmargin (hata bilgisi)
• http://csscreator.com/node/28664 (küçük bilgi)
• http://www.simplebits.com/notebook/2005/05/23/negative.html (negatif margin kullanılcak bir örnek)
• http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra (negatif margin ile sayfa yapısı oluşturma)
• http://haslayout.net/css/Negative-Margin-Bug (negatif margin sorunları)

Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.

Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani

Kodumuz aşağıdaki gibi

.kapsayamamaSorunu: after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after

.kapsayamamaSorunu:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.

2- Sorunun Kısayolu

Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.

.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

<div id="icerik" class="kapsayamamaSorunu">
    <ul>
        <li>
            <select>
                <option value="-1">Seçiniz</option>
                <option value="1">Deneme1</option>
                <option value="2">Deneme2</option>
            </select>
        </li>
    </ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
	<img src="images/deneme.jpg" width="150" height="80" />
</div>

#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.

Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.

1- Kutu Modeli ve CSS hillesi

Kutu modeli sorunları ve çözüm önerilerinden bahsettiğimiz makale ve bu konunun önemi açısından bu css hilesini başa aldık. Gerçekten birçok yerde karşılaştığımız bu sorun kullanılması en karmaşık gelen bir sorundur. Genel mantık olarak ie’nin özellikle 6 ve garip mod daki diğer tarayıcılarında farklı görünmesini engellemek için tantek çelik tarafından oluşturulan bir hiledir.

Kutu genişliği tanımlanmışsa ve padding veya kenar çizgiside tanımladığımızda uygulanan bu yöntem için yazdığımız kod aşağıdadır

#icerik{
width:230px;
padding:10px;
margin:5px; /* Bundan sonraki kısmı ie5win sakla */
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
}

Sorun olan kodumuza biz sadece

voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
} 

Bölümünü uygulamamız yeterlidir. Daha sonra eğer genişlik ise genişliği yükseklik ise yüksekliği ayarlamamız gerekir. Daha sonra html>body #icerik kısmından #icerik yerine kendi nesne adımızı yazmalıyız.

2- Float uygulanmış nesnelerin kapsayamama sorunu

Aslında clearfix olarakta adlandırılan bu sorun bir çok yerde başımıza dert olur. Alıştıktan sonra hemen uygular ve geçeriz.

Sorunumuzun genel tanımı Float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir.

Kodumuz;

.kapsul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 

.kapsul {display: inline-block;} 

/* IE-mac de bu bolumu sakla \ */
* html .kapsul {height: 1%;} 

.kapsul {display: block;}
/* IE-mac bu bolumu saklam artik */ 

Bu kodda .kapsul yerine kendi nesne ismimizi yazmamız yeterlidir.

3. IE6′un Tekrarlayan Karakter Sorunu

Bu hata birden fazla float uygulanmış iç içe elementlerde meydana gelir. Son float uygulanmış elementin son karakterleri tekrarlar. Soruna nedeni html yorum satırlarıdır ve çözüm için

<!--[if !IE]>Yorumunu buraya yaz <![endif]--> 

Kodunu yazarız. Ben burada yorum yazarken bu sorunla karşılaşabilirim diye tüm yorumlarımı bu şekilde yazarak bu sorundan kaçınmaya çalışıyorum.

4. IE6′nın min-height Sorunu

Son zamanlarda gelen işlerde çok rastlamam nedeni ile bu listeye son anda ilave ettim. IE6′nın desteklemediği min-height özelliği için

min-height:500px;
height:auto !important;
height:500px;

yazmamız yeterli.

Bunun dışında CSS Derslerindeki sayfasındaki CSS Problemleri ve Çözüm Önerileri kısmında birçok problem görünse de yukarıda saydıklarım problemlerle çok sık karşılaşıyorum. Bu sorunlarla karşılaştığımda her defasında siteye girip bu kodları kopyalamak sorun oluyor, bu nedenle Adobe Dreamweaver’ın Snippets Aracı ile bu sorunu giderdim.

Dreamweaver’da Snippets eklemek çok basit. İlk olarak eğer açık değilse Snippets penceresini açmak için üst menüden Window -> Sineppets veya shift+F9 kısayolu ile açabiliriz. Açtıktan sonra farenin sağ tuşuna basarak New Sineppet tıklayalım.

Açılan pencerede Name kısmına ismini yazalım(Örne: kutu hilesi) Insert Code kısmına da kodumuzu ekleyelim.

Evet kodumuzu eklemiş olduk. Bu şekilde devamlı kullandığımız kodları Sineppets penceresine ekleyerek kolaylık sağlayabiliriz.

Daha sonra kod yazarken bu kodlara ihtiyaç duyduğumuzda

Hemen bu pencereden ilgili başlığa çift tıklayarak kodumuzun içine ekleyebiliriz.

Sorun; float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir. Bu sorun zemin rengi/resmi uygulanmış veya kenarlık atanmış kapsayıcılarda daha iyi görünür. Sorun şekil.1′de gösterildiği şekilde kapsayıcı elementin float uygulanmış elementi kapsamamasıdır.

Bu bir hata değildir. Ama sayfalarımızı kodlarken genelde bu durumun meydana gelmesinden hoşlanmayız.

şekil.1 float sorun

Bir örnek yaparsak daha iyi anlayacağız.

CSS kodu:

.kapsul {
    border: 1px solid #000;
    padding: 2px;
}
img {
	float: left;
}

Html kodu:

<div class="kapsul">
    <img src="koy_01.jpg" alt="Bizim köy" weight="250" height="160" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>

Örneği görmek için tıklayınız.

Floatuygulanan resim div(.kapsul) içindeki resme göre genişlemez. Duruma tersten bakarsakbazen bu görünümü kullanabileceğimiz durumlarda olabilir, yani bu durumu bazı durumlarda kullanabiliriz. Bu durum bir hata değildir. CSS’in birhatası hiç değildir. Biz genelde float uyguladığımız kutuların içeriklerine göre genişlemesini isteriz.

Float özelliğiNetscape1.1 ile gelen bir özelliktir.Eğer kutularımıza kenarlık ataması yaparsak bu sorunu daha iyi görürüz.Biz kutunun içeriğe göre uzamasını yani sonunun temizlenmesini isteriz. .kapsul uygulanan div elementin tüm içeriği kapsaması için sonuna clear özelliği atanmış bir nesne koymalıyız. Bu işlemi farklı yöntemlerle yapabiliriz.

Boş bir elemente clear atayarak çözmek

Geneldekutuların içeriğine göre uzamasını isteriz. Bu sorunu çözmek küçük bir yapısalekleme yapmak yeterli olacaktır.

<div class="kapsul">
    <img src="resim.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
    <div style="clear:both;"></div>
</div>

Buşekilde sorunumuzu çözmüş oluruz ancak bu sorunla karşılaştığımız heryerde bu eklemeyi yapmak zorun kalacağız ve sırf bu düzeltme için boşbir div ekleyeceğiz. Buda mantıklı(semantik) kodlama açısından uygun değildir. Pekibunu başka nasıl çözeriz.

:after ile çözüm

CSS2ile birlikte gelen :after özelliğini kullanarak çözebiliriz. Css(:after) kodu ile bir elementinsonuna bir içerik ekleyebiliyoruz ve bu elemente css komutları atayabiliyoruz.Ayrıntılı bilgi için tıklayınız.Bu özellikten yararlanarak kutunun sonuna bir nokta koyup bu noktayaclear(clear:both) ataması yaparsak sorunumuz çözülmüş olacaktır. Tabi birde bunoktayı görünmez yapmamız gerekiyor, Kutuların sonunda nokta görünmesipek hoş olmaya bilir.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Ayrıcadisplay:block koyduk çünkü satır için(inline-level) elementler clear özelliğiatamasını kabul etmiyor. Aslında overflow ile de bu sorun halledilebilir ancakMozilla Firefox’un yeni sürümlerinde bu metot sorun çıkarıyor.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*IE-mac den bu bolumu sakla \*/
* html .clearfix {height: 1%;}
/* IE-mac bu bolumu saklama artik */

Tabibu kod burada kalmıyor çünkü IE ile sorunları var. Normalde IE’nin float uygulanmış elementin tamamı kapsamama sorunu diye bir problemi(bu ilginç bir durumdur) yoktur, ancak float uygulanmış elemente genişlik ve yükseklik tanımı yapılmadığında sorun ortaya çıkıyor. Bunu engellemek için sadece IE/Win gördüğü kapsayıcı elementin yüksekliğine %1 ataması yaparız. Ancak bu kısımı IE/Mac’lerden saklamamız gerek bunun için ters bölme(\) işaretini kullanırız böylelikle IE/Mac sürümü komut satırının devam ettiğini farz ederek bu satırı görmez.

Sıra geldi IE/Mac’de sorunu aşmaya, IE/Mac’deki sorunu aşmak için display: inline-block; tanımlamasını yapıyoruz. Tabi diğer web tarayıcılarının bundan etkilenmemesi için IE/Mac’den gizlediğimiz alana display: block; atamasını eklemeliyiz.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.kapsul {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsul {height: 1%;}
.kapsul {display: block;}
/* IE-mac bu bolumu saklam artik */

Örneğin son halini görmek için tıklayınız.

şekil2 float sorununun çözülmüş hali

Bu metot bu sorunun çözümü için en ideal çözümdür. Bu sorunun çözümünde birçok insanın emeği geçmiştir. Doug, Mark Hadley, Matt Keogh, Holly’n John ve Tony Asslet‘a bundan dolayı şükranlarımızı sunarız. thank you guys :D Ayrıca bu konuda Türkçe bir makale yazan dahaiyi.net‘e çok teşekkürler.

Bu yöntemi biraz daha kolaylaştıralım. Sonuçta macde ie kullanan kalmadağına göre kodumuzu

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

CSS3 ile sorunun çözümü

Bu sorunun farkında olan CSS standart geliştiriciler bu soruna kökten çözüm getirmişler. clear-after yeni özelliği sayesinde bu kodlardan kurtulacağız tabi biraz zaman gerekecek bu özelliği kullanmak için. Malum hala uygulamada değil CSS3.0

.kapsul {
	clear-after: both;
}

Yukarıdaki örnekteki gibi tek satırlık bir kod sorunumuzu çözecektir.

Sonuç

Sonuç olarak şunu söyleyebiliriz ki bu sorunu çözmek için bir kaç çözüm yolu mevcut olsada şu an için :after ile çözüm başlığı altındaki kodu kullanmak bizim için uygundur. Ben web sitelerini kodlarken bu sorunla çok karşılaştığım için bir yere not ettim(Macromedia Dreamweaver – Snippets) ve lazım olduğu zaman hemen ekliyorum. Bu şekilde sorun hızlı bir şekilde çözmek mümkün oluyor.

Kaynaklar

• http://www.positioniseverything.net/easyclearing.html
• http://www.complexspiral.com/publications/containing-floats/
• http://www.dahaiyi.net/yazilar/temiz-bir-clearfix-metodu/
• http://csscreator.com/?q=attributes/containedfloat.php
• http://css-discuss.incutio.com/?page=ClearingSpace
• http://www.cs.hmc.edu/~mbrubeck/clear-after/
• http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-clear-after

#icerikAlani {
    margin: 10px;
    border: 1px solid gray;
}
#icerikAlani #menu {
    float: right;
    width: 150px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-left: 5px;
}

İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek için float:right, genişliğini belirlemek için width:150px, sol ve alt kenarlıklarını belirlemek için border-left ve border-bottom(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık ataması yapmadık) ve içerik metini ile arasında boşluk bırakmak için margin-left atamlarını yapıyoruz.

<div id="icerikAlani">
    <div id="menu">
    <ul>
        <li><a href="anasayfa.html">Ana Sayfa </a></li>
        <li><a href="haberler.html">Haberler</a></li>
        <li><a href="iletisim.html">İletişim</a></li>
    </ul>
    </div>
    <h1>Lorem Ipsum Dolar </h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  . . .
</div>

Örnek sayfayı görmek için tıklayınız.