İki temel uygulamadan sonra şimdi yatay ve dikey DIV’lerin karmaşık olarak bir arada bulunduğu yapıları inceleyebiliriz. Bu karmaşık yapıları bazen tek seferde kodlamak mümkün olmayacağı için böylesi durumlarda fazladan DIV’ler kullanarak sonuca ulaşacağız. Genellikle kapsayıcı (container) olarak adlandırılan bu ek DIV’ler aynı zamanda kodumuzun daha kolay anlaşılır bir yapıya sahip olmasını da sağlar.

KARMA YAPILAR

ÖRNEK 1

Aşağıdaki çizimde gördüğünüz örneği önce sayfamızın soluna sonra da sağına yaslı olarak kodlayalım. En sona da sayfamızın ortasında olması şeklini inceleyip kapsayıcı (container) kullanımını görelim.
Karma yapılar

SOLA YASLI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#div1  {float: left;
background: #edeaea;
height: 100px;
width: 510px;
}
#div2  {float: left;
clear: both;
background: #edeaea;
height: 280px;
width: 100px;
}
#div3  {float: left;
background: #edeaea;
height: 280px;
width: 310px;
}
#div4  {float: left;
background: #edeaea;
height: 280px;
width: 100px;
}
#div5  {float: left;
clear:both;
background: #edeaea;
height: 100px;
width: 510px;
}
</style>
</head>
<body>
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
<div id="div4">DIV4</div>
<div id="div5">DIV5</div>
</body>
</html>

SAĞA YASLI

Sayfanın sağa yaslanmış olması neredeyse hiç karşılaşmayacağımız bir durumdur. Ancak yine de kodlama açısından ne gibi farklar olduğunu ortaya koymak ve IE ve Firefox’un yorumlama farklarından birini daha görmek için bu örneğe de yer veriyorum.
Firefox için özel bir durum.
Bir de burada dikkatinizi çekmesi gereken DIV’lerin sıralamasıdır. Orta alanda yer alan DIV2, DIV3 ve DIV4 tersten sıralanmalıdır. Sağa ya da sola yaslanmış ve aynı satırda yer alan (inline) DIV’lerden hangisi  önce yazılmışsa o DIV yaslandığı taraftaki ilk DIV olacak ve sonrakiler onu takip edecektir. Bunu kodları inceleyince göreceksiniz.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#div1  {float: right;
background: #edeaea;
height: 100px;
width: 510px;
}
#div2  {float: right;
background: #edeaea;
height: 280px;
width: 100px;
}
#div3  {float: right;
background: #edeaea;
height: 280px;
width: 310px;
}
#div4  {float: right;
clear: both;
background: #edeaea;
height: 280px;
width: 100px;
}
#div5  {float: right;
clear:both;
background: #edeaea;
height: 100px;
width: 510px;
}
</style>
</head>
<body>
<div id="div1">DIV1</div>
<div id="div4">DIV4</div>
<div id="div3">DIV3</div>
<div id="div2">DIV2</div>
<div id="div5">DIV5</div>
</body>
</html>

IE yorumlaması ve kapsayıcı (container) kullanımı

Yukarıda yer alan kodumuz Firefox’ta istediğimiz sonucu verecektir. Ancak IE’de maalesef hayal kırıklığı yaşıyoruz. Bu durumu düzeltmek için orta alandaki DIV’lerimizi içine alan ek bir kapsayıcı DIV kullanacağız. Böylece IE’de de Firefox’ta gördüğümüz sonucu görmemiz mümkün olacak.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#div1  {float: right;
background: #f2f2f2;
height: 100px;
width: 510px;
}
#kapsayici {float: right;
clear: both;
height: 280px;
width: 510px;
}
#div2  {float: left;
background: #dedbda;
height: 280px;
width: 100px;
}
#div3  {float: left;
background: #edeaea;
height: 280px;
width: 310px;
}
#div4  {float: left;
background: #dedbda;
height: 280px;
width: 100px;
}
#div5  {float: right;
clear:both;
background: #f2f2f2;
height: 100px;
width: 510px;
}
</style>
</head>
<body>
<div id="div1">DIV1</div>
<div id="kapsayici">
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
<div id="div4">DIV4</div>
</div>
<div id="div5">DIV5</div>
</body>
</html>

ORTALI

DIV’lerimizi sağa yaslı kullanmak istediğimizde, orta alan için IE bize kapsayıcı kullanma zorunluluğu getirmişti. Ortalı kullanımda ise aynı zorunluluk Firefox’ta da karşımıza çıkıyor. Stil özelliklerimize burada MARGIN’i de ekliyoruz. FLOAT özelliğinin değeri NONE olan satırları silmeniz durumu değiştirmeyecektir. Yine de bir kodlama disiplini sağlamak için bu satırların kalmasında fayda vardır. MARGIN özelliği AUTO değeri alması etki ettiği DIV’i ortalaması anlamına gelmez. Aslında yaptığı şey,  etki ettiği DIV’in sağından ve solundan eşit itme alanı oluşturmaktır. MARGIN’in davranışını bu şekilde anlamak daha doğru olacaktır.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#div1  {float: none;
margin: auto;
background: #f2f2f2;
height: 100px;
width: 510px;
}
#kapsayici{float: none;
margin: auto;
clear: both;
height: 280px;
width: 510px;
}
#div2  {float: left;
background: #dedbda;
height: 280px;
width: 100px;
}
#div3  {float: left;
background: #edeaea;
height: 280px;
width: 310px;
}
#div4  {float: left;
background: #dedbda;
height: 280px;
width: 100px;
}
#div5  {float: none;
margin: auto;
clear:both;
background: #f2f2f2;
height: 100px;
width: 510px;
}
</style>
</head>
<body>
<div id="div1">DIV1</div>
<div id="kapsayici">
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
<div id="div4">DIV4</div>
</div>
<div id="div5">DIV5</div>
</body>
</html>

Kapsayıcı kullandığımız durumlarda kapsanan DIV’lerin hareket alanı artık tüm sayfa değil kapsayıcının içidir. Bu DIV’lerin FLOAT özelliklerinin aldığı değerlerini nasıl değişiklik gösterdiğini örnekleri karşılaştırarak görebilirsiniz.

BİR ÖRNEK DAHA

Aşağıda daha farklı bir örneğin uygulanmasını görüyorsunuz. Bundan sonraki örneklerimizde, sitemizin tarayıcı penceresinin ortasında yer aldığını düşünüp kodlarımızı on göre yazacağız. Orta alandaki uygulamaya dikkat etmeniz gerek. MARGIN’in bize nasıl yardımcı olduğu konusunda size fikir verecektir.
Bir süre daha örneklerimizi genişlik ve yükseklikleri kesin belli olan DIV’ler üzerinde devam ettireceğiz. Temel CSS özelliklerini bitirdikten sonra daha esnek örnekler üzerinde çalışmalarımızı devam ettirebiliriz.
Karma yapılar

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#div1  {
margin: auto;
background: #f2f2f2;
height: 100px;
width: 510px;
}
#kapsayici{
margin: auto;
clear: both;
height: 280px;
width: 510px;
}
#div2  {float: left;
background: #dedbda;
height: 280px;
width: 100px;
}
#div3  {float: left;
background: #edeaea;
height: 280px;
width: 310px;
}
#div4  {float: none;
position:relative bottom;
margin: 160px auto 0 auto;
background: #dedbda;
height: 100px;
width: 290px;
}
#div5  {float: right;
background: #dedbda;
height: 280px;
width: 100px;
}
#div6  {
margin: auto;
clear:none;
background: #f2f2f2;
height: 100px;
width: 510px;
}
</style>
</head>
<body>
<div id="div1">DIV1</div>
<div id="kapsayici">
<div id="div2">DIV2</div>
<div id="div3">DIV3
<div id="div4">DIV4</div>
</div>
<div id="div5">DIV5</div>
</div>
<div id="div6">DIV6</div>
</body>
</html>

Yararlı olması dileğiyle.
Ve bir not: Şekillerde gördüğünüzle kodlardaki uygulama arasında kenar boşlukları, çerçeveler ve zemin renkleri gibi farklar vardır. Kodları dikkate almanız gerekir.