Boş Gezenin Boş Kalfası: CSS Orta Seviye

Merhaba,

HTML orta seviye yazımız gibi bu yazımızda da pek zorlayıcı bir şey yok, ama başlangıç seviyesine göre daha kapsamlı.

class ve id seçicileri

Başlangıç yazımızda tag seçicilerini görmüştük. Ama bunlar sayfadaki aynı tipteki elemanların hepsini seçiyor ve değiştiriyordu. class ve id özelliklerini kullanarak istediğimiz elemana nokta atış yapabiliriz. CSS'de class seçiciler nokta karakteri ve ardından bitişik gelen class değeri ile ifade edilirken id değeri # işareti ile başlayan şekilde ifade edilir.

Buna göre CSS kodumuzu şöyle düşünelim

style2.css

#top {
    background-color: #ccc;
    padding: 20px;
}

.intro {
    color: red;
    font-weight: bold;
}

HTML sayfamızda class ve id kullanarak bu stillere başvuru yapan elemanlar olsun.

index2.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS orta seviye</title>
        <link rel="stylesheet" href="/style2.css">
    </head>
    <body>

        <div id="top">
            <h1>Çukulata köri</h1>
            <p class="intro">Bu sadece çukulatadan yapılan 
            bir köri için benim reçetem</p>
            <p class="intro">Mmm mm mmmmm</p>
        </div>

    </body>
</html>

id ve class arasındaki farka gelince id'yi sayfada sadece bir tek elemanı işaretlemek için kullanırız, class ile ise birden fazla elemanı işaretleyebiliriz. Yani sayfada birden fazla aynı class değerine sahip eleman olabilir.

Yukarıdaki sayfa görüntüsü şöyle olur.

Bir seçiciyi sadece bir eleman türüne de uygulayabiliriz. Diyelim aynı class değerine sahip farklı elemanlar var ve biz sadece o class değerine sahip paragrafların etkilenmesini istiyoruz p.jam { /* stiller */ } ile sadece jam class değerine sahip p elemanlarını seçmiş oluruz.

Gruplar ve içiçe yapılar

Bunlar CSS ve HTML'de kodumuzu anlaşılabilir yapmak için 2 yöntem.

Gruplama

Aynı değerlere sahip elemanlar için tek tek işlem yapmamıza gerek yok.

h2 {
    color: red;
}

.digerClass {
    color: red;
}

.birDigerClass {
    color: red;
}

Seçici kelimeleri basitçe virgül ile ayırarak hepsini tek grupta yazabiliriz.

h2, .digerClass, .birDigerClass {
    color: red;
}

İlle elemanların tüm özellikleri aynı olması gerekmez. Sadece ortak olan özellikleri grup içinde yazıp , farklı olanları ayrı seçiciler içinde yazmak bile kodumuzu daha sadeleştirecektir.

İçiçe yapılar

Eğer CSS'i ve HTML'i düzgün planlarsak bir sürü ayrı class ve id değerleri ile uğraşmamız gerekmez. başka seçicilerin içinde olan seçiciler için de isimlendirme şöyle yapılır.

#top2 {
    background-color: #ccc;
    padding: 1em
}

#top2 h1 {
    color: #ff0;
}

#top2 p {
    color: red;
    font-weight: bold;
}

Bu sayede id değeri top olan eleman içindeki h1 ve p elemanları için ayrı seçici isimleri yazmak zorunda kalmayız. Örnek HTML,

<div id="top2">
    <h1>Çukulata köri</h1>
    <p>Bu sadece çukulatadan yapılan 
            bir köri için benim reçetem</p>
    <p>Mmm mm mmmmm</p>
</div>

Bu şekilde yazarak id değeri top2 olan elemanın içindeki h1 elemanı rengi #ff0 olacak ve yine top2 içindeki p elemanı yazıları kırmızı olup kalın yazılar olacak diyoruz.

Eleman içinde eleman onunda içinde eleman oldukça nu yapıyı iyi takip etmek gerekir. Ama pratik yaptıkça alışılır.

Mevcut sınıflar

Bu class değerleri bizim vermediğimiz ama elemanlar için ön tanımlı olan class değerleridir. Genellikle elemanın durumlarına bağlı stil değişikliklerini ifade etmek için kullanılırlar. Yapı olarak seçiciler seçici_kelime:mevcut_class { stil: değer; } şeklinde yazılır. Yani seçici kelime ile mevcut class değeri iki nokta üstüste karakteri ile birleştirilir.

Peki nerelerde var bu ön tanımlı sınıflar?

Linkler

Ziyaret edilmemiş linkleri belirten link sınıfı ve ziyaret edilmiş linkleri belirten visited sınıfı vardır. Bunlar HTML kodunda yazılmamasına rağmen tüm linkler için ön tanımlıdır.

Aşağıdaki kod sayfadaki tüm linklere uygulanır ve ziyaret edilmiş linkler ile edilmemiş linklerin yazı rengini belirler.

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

Dinamik mevcut sınıflar

Bunlar da elemana bir şeyler yapıldığında işlenen mevcut sınıflardır. Çok faydalıdırlar.

active - Kullanıcı tarafından bir şey aktif edildiğinde , mesela menülerde bulunulan sayfa linki active yapılması.
hover - Kursörün elemanın üzerinde gezinirken durumu. Nasıl link üzerine kursör götürünce parmak işareti olursa öyle.
focus - Genellikle giriş yapılan input elemanları için kullanılır. İçine tıklanıp o girişe odaklanıldığı durumdur.

Focus genellikle form elemanları için kullanılır ama link elemanları için de kullanılabilir. Örnek stilller şöyle,

a:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

a:active {
    color: red;
}

input:focus, textarea:focus {
    background: #eee;
}

Sayfada linkler üzerinde mouse gezdirince hover işleminin etkisini görebiliriz. Tıkladığımız anda ise active olur, bunu sayfa geçmeden görmek isterseniz linki tıklayıp düğmeyi bırakmayın.

First children - İlk eleman

Bir elemanın içinde başka elemanlar varsa bu elemanların ilkini seçmek için first-child mevcut sınıfı kullanılır. Diyelim aşağıdaki gibi bir HTML kodumuz var,

        <div class="test">
            <p>Ben bu bölümün ilk paragrafıyım. Kural benim. Bana baş eğ.</p>
            <p>Seni ciddiye almıyorum.</p>
        </div>

İlk paragrafı seçen CSS kodu şöyle olur,

.test p:first-child {
    font-weight: bold;
    font-size: 40px;
}

Ve sonuç

Not: CSS3 ile birlikte yeni mevcut sınıflar da eklendi. last-child , target , first-of-type ve daha başkaları..

Kısaltılmış Özellikler

Bazı CSS özellikleri değer olarak birden fazla kelime girmemize imkan vererek bir çok değeri aynı satırda girebilmemizi sağlar. Değerler arasında boşluk bırakılarak yazılır. Diğer programlama dillerinden gelenler alışkanlık olarak virgül koymaya kalkmasın.

Margin ve Padding değerleri

margin dört yöne ait margin-top , margin-right , margin-bottom , margin-left özelliklerini birleştirir. Değerler girilirken sırasıyla top right bottom left değerleri girilir.

Yani,

p {
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 20px;
}

ile

p {
    margin: 1px 5px 10px 20px;
}

aynı işi yapacaktır. padding de aynı şekilde kullanılır.

Sadece 2 değer girersek döne döne aynı değerleri uygular. Şöyle ki padding: 1em 10em; yazdığımızda top: 1em - right: 10em - bottom: 1em ve left: 10em olarak alınacaktır.

border - sınır çizgisi

border-width , border-color ve border-style da tek bir border özelliği içinde ifade edilebilir.

p {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

ile

p {
    border: 1px red solid;
}

aynı işi yapar. Burada bir özgürlüğümüz daha var, değerlerin hepsi başka birimlerde olduğu için istediğmiz sırada yazabiliriz. Yani border: 1px solid red veya border: solid red 1px; de aynı işi yapar. Bu şekilde bir kombinasyonu border-right ya da border-top gibi sadece bir tek kenar için de kullanabiliriz.

Font

font- ile başlayan özellikleri de font özelliğinde birleştirebiliriz.

p {
    font: italic bold 12px/2 courier;
}

Burada font-style , font-weight , font-size , line-height ve font-family özellikleri bir arada verilmiş.

p#test-font {
    font: 14px/1.5 "Times New Roman", times, serif;
    padding: 30px 10px;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 10px 50px;
}

ve HTML şöyle olursa

<p id="test-font">Bu yazı çok güzel</p>

Arkaplan resimleri

HTML'deki img elemanı dışında CSS arkaplan resimleri de sayfalarda güzel görseller oluşturmak için faydalıdır.

background kısaltılmış özelliği tüm bu arkaplan resim işlemlerini yapabilir.

div#test-bgimg {
    background: gray 
        url(http://www.htmldog.com/images/bg.gif) 
        no-repeat 
        top right;
    min-height: 150px;
}

ve HTML,

        <div id="test-bgimg">
            test
        </div>

Burada birleştirilen özellikler:

background-color - daha önce anlatmıştık
background-image - arkaplan resimin konumu
background-repeat - resimin arkaplan tamamına nasıl yayılacağı. Şunlar olabilir

repeat - tile etkisine benzer. Resim tüm arkaplanı kaplayana kadar tekrar tekrar konur.
repeat-y - y ekseninde yukarı aşağı yönde tekrarlanır
repeat-x - x ekseninde sağa sola doğru tekrarlanır
no-repeat - yukarıdaki gibi sadece bir kere resim konur

background-position - resimin konacağı pozisyon. top, center, bottom, left, right değerlerinden birini ya da ikisini alır. Yukarıda top right diyerek sağ üst köşeye gönderilmiş bir resim var. Ayrıca % değer de vererek içinde bulunduğu element de bağıl olarak nerede olacağı belirlenebilir. Yani body arkaplana 50% 50% şeklinde bir değer le konan resim ömrü billah sayfanın ortasında durur. Yukarı da gitseniz aşağıda gitseniz, pencereyi küçültseniz de büyütseniz de resim ortalayacaktır.

Öncelikler

Geldik CSS'in vahşi batısına. Aynı elemana ait birden fazla CSS kuralı varsa ne olacak? Özellikle internette hazır bulunan CSS kütüphanelerini sayfalarımızda kullanırken o kütüphane içinde zaten var olan bir elemana ait stilleri değiştirmek istersek nasıl davranacağız. Çakışmalara hakim olabilmek için bazı kuralları bilmemiz gerekiyor.

Şimdiye kadar yaptığımız gibi küçük CSS dosyalarıyla uğraşırken bu sorun olmamalı gibi görünebilir. Ancak stil dosyalarımız kabardıkça yaptığımız değişikliğin istediğimiz sonucu vermediğini gördüğümüzde ilk olarak kodumuzun doğruluğunu kontrol ettikten sonra bu çakışmaların olup olmadığını test etmemiz gerekiyor.

Daha öncelikli

Eğer aynı stil dosyasında birden fazla aynı elemanın aynı stili varsa en son yazılan geçerli olacaktır.

Örneğin,

p#test-precedence { color: red }
p#test-precedence { color: blue }

ve HTML,

<p id="test-precedence">Bu yazı mavi olmalı</p>

Olması durumunda çakışma olan 2 satırdan sonra gelen geçerlidir. Satırların stil dosyasında arka arkaya gelmesi gerekmez ne kadar sonra gelirse gelsin en son yazılan geçerli olur. Bunu görmek için satıra tarayıcıda sağ tıklayıp "öğeyi incele" seçerek geliştirici araçlarını açtığımızda styles bölümünde şunu görürüz.

Burada diyor ki style2.css dosyası 70. satırında renk kırmızı olarak verilmiş ama onun üstünü çizdim. Çünkü style2.css dosyası 71. satır ondan sonra geliyor ve bana renk mavi olacak diyor.

Hemen akla gelen bir soru, şöyle olursa ne olacak?

p#test-precedence { 
    color: red;
    font-size: 2em;
}
p#test-precedence { color: blue }

gelen cevap,

Geliştirici araçlarında kontrol ettiğimizde,

Tarayıcı sadece çakışma durumunda sonradan geleni geçerli yaptı. Ama çakışma olmayan stiller hala geçerli bloğu komple iptal etmiyor. Geliştirici araçlarının bende en çok işe yaradığı yerlerden biri bu CSS çakışmaları.

Bir kural da içiçe elemanlar olması durumu.

div p { color: red }
p { color: blue }

Bu durumda div içinde yer alan p elemanları ile dışarıdaki p elemanlarında çakışma olmaz. Yani div içinde yer alanlar kırmızı, dışarıda yer alanlar (ya da diğer geri kalan p elemanları) mavi olacaktır.

Bunun istisnası da yukarıda verdiğimiz örnek. Çünkü o örnekte p elemanlarına id değeri verdik ve seçicide id değeri test-precedence olan tüm p elemanları deniyor. Bu girer div içindeki p elemanını da bulur ve değiştirir. Alın size vahşi batı..

Bir şey değil, div p [ color: red } satırı daha sonra da gelse farketmez. Yine de id verilen satır geçerli olacaktır. Şimdi ne oluyoruzu açıklamaya çalışacağım. Çok çok ilginç kurallar zinciri var, inanamayacaksınız.

Önceliği hesaplamak

Aslında daha önce dediğim sonraki stil geçerli olur lafı sadece eşit öncelikli seçiciler için geçerliydi. Seçicilerin öncelik değerini hesaplamanın bir yolu var ve bunu uyguladığımızda hangi seçicinin öncelik değeri hesabı daha yüksek çıkarsa o seçicinin verdiği stil değeri geçerli olur. Unutmayalım sadece bu hesaplanan değer eşitse sonradan gelen stil geçerli olacaktır.

Değer verirken kurallar şunlar:

Satır içi stiller = 1000 puan. Yani <h1 style="color: #ffffff;"> şeklinde bir elemanın satır içinde verilen bu stili 1000 puan alarak en önce ben diyor.
id seçiciler = 100 puan. Yani #top { ... } şekli 100 puan alıyor.
class seçiciler = 10 puan. Yani .intro { ... } şekli 10 puan alıyor.
html seçiciler = 1 puan. Yani p { ... } şekli 1 puan alıyor.

Şimdi gelelim örneklere,

p seçicisi 1 puan eder (HTML seçici)
div p seçicisi 2 puan eder (1HTML + 1HTML)
.tree seçicisi 10 puan (1 class)
div p.tree seçicisi 12 puan (1 class, 2 HTML)
#baobab seçicisi 100 puan (1 id)
body #content .alternative p seçicisi 112 puan (html , id , class , html)
<h1 style="color: #ffffff">Heading</h1> inline 1000 puan.

İşte bu şekilde hesap yaptığımızda en yüksek puanı alanın dediği olacaktır.

Display

Şimdiye kadar öğrendiklerimizden şunu görebiliriz, sadece birkaç HTML eleamnı ile sayfa düzenlenebilir gerisi CSS dir. Tarayıcılar stil vermesek bile elemanlara bir default stil verir. Tüm satırı kaplayan mesela h1..h5 ve p elemanları gibi elemanlar display özelliklerinde block değeri verilmiştir. Bu değerleri elemanın stiline geliştirici penceresinde bakarak ayrı bir bölümde görebiliriz.

display özelliğinin alacağı 3 değer inline , block ve none .

inline

inline adından da anlaşılacağı üzere aynı satırda yanyana sıralı yerleşim ifade eder. Hatırlar mısınız nav diye bir HTML eleamnı vardı. Demiştik ki bunlarla sayfaların üstündeki menüler yapılır. Ama kodun çıktısına bir baktık alt alta liste. O kodu bir hatırlarsak.

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Eğitimler</a></li>
        <li><a href="/techniques/">Teknikler</a></li>
        <li><a href="/examples/">Örnekler</a></li>
        <li><a href="/references/">Referanslar</a></li>
    </ul>
</nav>

Buna şöyle bir stil yazarsak linkler yanyana gelecektir.

#main_nav li {
    display: inline;
    padding: 10px;
}

block

block ile eleman bulunduğu elemanın içini genişliğine komple kaplar. Mesela body içindeki bir eleman display değeri block ise tüm pencere genişliğini kaplar. Tüm başlıklar , paragraflar , listeler ön tanımlı olarak display özelliklerinde block değeri vardır.

block değeri bir avantaj için daha kullanılır. Yukarıdaki navigasyon bar örneğini düşünürsek, tam yazı üstüne değil de linkin oluşturduğu bloğa tıklama avantajı sağlayarak tıklanan alanı genişletebiliriz.

#main_nav li {
    display: inline;
}
#main_nav a {
    display: inline-block;
    padding: 20px 10px;
}

none

none o elemanı görünmez yapar. Pek işe yaramaz gibi görünebilir ama JavaScript ile dinamik sayfalar yaparken elemanın display özelliğini none yaparak sayfada yok olmasını sağlayabiliriz.

display: none ve visibility: hidden aynı işi yapıyor gibi gelebilir. Ama display: none elemanı tamamen yok eder ama visibility: hidden elemanı oraya koyar ama görünmez olmasını sağlar. Örnek,

        <p>Bundan sonraki satır display: none</p>
        <p style="display: none;">Bu satır yok olacak</p>
        <p>display: none sonrası eleman</p>
        <p>Bundan sonraki satır visibility: hidden</p>
        <p style="visibility: hidden;">Bu satır görünmez olacak</p>
        <p>visibility: hidden sonrası eleman</p>

Gördüğümüz gibi display: none stili olan eleman hiç oraya konmadı, ancak visibility: hidden stili olan eleman için orada bir boşluk oluştu.

Tablolar

Bu ana kadar olanlar temellerdi. Şimdi daha nadir kullanılan display özelliklerine gelelim.

HTML table elemanını düşündüğümüzde, tr ve td elemanları ile tablonun satırlarını ve tablonun hücrelerini belirtiyoruz.

Tablolarda display özelliği genellikle table-column , table-row-group , table-column-group , table-header-group , table-footer-group ve table-caption değerlerini alır. İsimlerine bakarak bu elemanların ne iş yaptığını aşağı yukarı tahmin edebiliriz. Örnek olarak tarayıcılarda default olarak alınan tablo stillerini verelim (User Agent Stylesheet'den)

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}

Bu değerleri kullanarak CSS kullanarak ama table elemanı kullanmadan şöyle bir tablo üretilebilir.

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>

Ama dikkatli olmak lazım eski model tarayıcılar bu stilleri işlemekte sıkıntı yaşayabilir. CSS tablolar denilen bu yapı sayfamızın dağılmasıyla sonuçlanabilir.

Diğer display değerleri

list-item değeri bir liste elemanında olduğu gibi bir kutu oluşturur. Bu şekilde gösterilen elemanların bir ul ya da ol bloğu içinde olması uygun olacaktır.

run-in değeri ise elemanın display özelliğini içinde bulunduğu üst eleman ile aynı olacak şekilde inline ya da block gibi davranmasını sağlar.

Ön tanımlı elemanlar

Ön tanımlı elemanlar , daha önce gördüğümüz ön tanımlı sınıflar gibi ifade edilirler. Bunlara bir bakalım.

İlk harf ve ilk satır

first-letter elemanı içinde bulunduğu bloğun ilk harfini işaret eder. first-line ise ilk gösterilen satırı işaret eder.

  <p id="firstler">Bir zamanlar "Bebeğim sadece beni 
 umursuyor" müziğine sarılan pembe menekşelerle kaplı bir
 yabanmersini sakızında Bedooda adlı şişmanca ama çekici
 bir ahududu perisi yaşardı</p>

ve stilimiz

#firstler {
    font-size: 16px;
}

#firstler:first-letter {
    font-size: 36px;
    float: left;
    margin-right: 5px;
}

#firstler:first-line {
    font-weight: bold;
}

olursa şu karşımıza çıkar.

Sayfa genişliğiyle oynadıkça sadece ilk satıra denk gelen kelimelerin nasıl seçildiğini görebiliriz.

İçerik öncesi ve sonrası

before ve after ön tanımlı elemanları içerik başlangıcına ve sonuna yeni içerik eklemek için kullanılır. İçeriği HTML'de veriyorduk diyorsunuz ama bunu yalnızca sunum için içeriği ödünç almak olarak düşünebiliriz. Bir sürü şeyler de koymayacağız.

şöyle bir HTML olsun

        <blockquote id="blqBeforeAfter">Şair John Travolta çok güzel 
        bir söz söylemiş</blockquote>

        <ul>
            <li class="liBefore">Ne güzel</li>
            <li class="liBefore">Elemanlar </li>
            <li class="liBefore">Var burada</li>
        </ul>

        <p id="pBefore">Reçel resimli yazı. Reçelin tarifini yapabiliriz.</p>

test amaçlı bir CSS,

#blqBeforeAfter:before {
    content: open-quote;
}

#blqBeforeAfter:after {
    content: close-quote;
}

.liBefore:before {
    content: "POW!  ";
}

#pBefore:before {
    content: url(images/jam.jpg);
}

ve çıktı,

content özelliğibize oynayabileceğimiz ayrı bir kutu verir. Mesela daha etkileyici bir content için,

.liBefore:before {
    content: "POW!  ";
    background: red;
    color: #fc0;
}

Of of yani olamaz bu kadar. Çok etkileyici oldu.

YERLEŞİM

Çook eskiden Hominid öncesi maymunlar zamanı falandı HTML yerleşimleri tablolar ile yapılırdı. Sonra 2001'de CSS adında destansı bir uzaylı geldi ve bunları değiştirdi. Ama hala bazı kendini bilmezler HTML anlatırken yerleşimin tablolar ile nasıl yapıldığını tarihi bilgiler olarak aktarıyorlar.

CSS ile yerleşim yapmak daha kolay. Sayfa bölümlerini ayrı ayrı hazırlayıp istediğimiz yere CSS yardımıyla mutlak pozisyon ya da içeren elemana göre bağıl pozisyonlarla yerleştirebiliriz.

Pozisyon

position özelliği ile kutu pozisyonunun absolute , relative , static ya da fixed olmasını belirleriz:

static standart olandır. Elemanı HTML kodunda belirtilen gibi yerleştirir.
relative static'e benzer ama elemanı bulunduğu yerden göreceli olarak top , right , bottom , left özellikleri ile kaydırırız.
absolute elemanı HTML'in belirttiği yerden alır kendi dünyasına taşır. Bu çılgın küçük dünyada kutu sayfada istenen yere top , right , bottom , left özellikleri ile yerleştirilir.
fixed ile absolute benzerdir ama fixed kutuyu pencerede bir sabit pozisyona götürür. Bu yüzden fixed değere sahip olan kutular sayfada aşağı da gitseniz pencerede nerede duruyorsa orada sabit kalırlar. Sayfada aşağı indikçe yukarıdan yok olmayan menüler buna bir örnek.

Absolute pozisyonlama ile sayfa yerleşimi

Klasik 2 sütunlu yerleşimi absolute pozisyonlama kullanarak yapabiliriz.

Örnek HTML,

        <div id="navigation">
            <ul>
                <li><a href="this.html">Bu sayfa</a></li>
                <li><a href="that.html">Şu sayfa</a></li>
                <li><a href="theOther.html">Diğer sayfa</a></li>
            </ul>
        </div>
        <div id="content">
            <h1>Raa raaa rararaaa</h1>
            <p>Raa raaa rararaaa sayfasına hoş geldiniz. 
            Raa raaa rararaaa. Raa raaa rararaaa. 
            Raa raaa rararaaa. Raa raaa rararaaa. </p>
            <p>(Raa raaa rararaaa)</p>
        </div>

CSS,

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#content {
    margin-left: 200px;
}

Sonuç

Eğer sağ tarafta da bir yan menü ile 3 sütun yapmak istersek yeni bir bölüm daha ekleriz ve CSS kodunu şöyle yaparız.

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

#content {
    margin: 0 200px; /* alt üst marjinler 0  
                     sol sağ marjinler 200px */
}

Bu yöntem yan menülerde görece az ve orta içerikde çok yazı olan sayfalarda ve standart ekranlar için etkilidir. Ama değişik içeriklerde ve küçük ekranlarda sıkıntı olabilir. Bu sıkıntılar için başka bir çözüm olan float pozisyon kullanabiliriz.

Float

float özelliği kutuyu çizgi üzerinde sağa sola serbestçe kaydırır. float: left ya da float: right değerleri verebiliriz. Yukarıdaki aynı CSS'i float ile yaparsak,

#navigation {
    float: left;
    width: 200px;
}

#navigation2 {
    float: right;
    width: 200px;
}

#content {
    margin: 0 200px;
}

Content div mecburen float menüler arasında kalan yere gelecektir. Sağ ve sol bölümlerin içerikten daha fazla aşağı uzadığını düşünürsek, daha sonra bir sonra gelen kutular hep arada kalacaktır. Ama biz tamamen herşeyin altına gelecek bir footer elemanı istiyoruz diyelim. Bu durumda clear özelliği ile float eleman baskısından kurtuluruz.

clear: left - sola kaydırılan float'lardan kurtulur
clear: rgiht - sağa kaydırılan float'lardan kurtulur
clear: both - her iki yandaki float'lardan kurtulur.

Diyelim sayfaya bir footer ekledik,

<div id="footer">
    <p>Footer! Hoorah!</p>
    <p>Uzuuun bir footer yazısı ile test. Footer yazısı ile test. 
    Footer yazısı ile test. Footer yazısı ile test. 
    Footer yazısı ile test. Footer yazısı ile test. </p>
</div>

stile de şunu ekleyelim,

#footer {
    clear: both;
}