Layout cu CSS este simplu. Dacă încerci să pui o pagină cu tabele, este posibil la prima vedere să pară dificil, dar nu este, e doar diferit si de fapt are mult mai mult sens.

Trebuie să te uiţi la fiecare parte a paginii ca la o parte individuală pe care o puteţi lansa oriunde îţi alegi. Puteţi plasa aceste părţi absolut sau relativ la o altă parte parte.

Pozitionare

Proprietatea position este utilizată pentru a defini dacă un element este absolute , relative , static sau  fixed .

Valoarea static, este valoarea implicită pentru elemente şi ordonează poziţia în ordinea normală a lucrurilor, aşa cum apar ele în HTML.

relative este mai mult decât static, dar elementul poat fi echilibrat de la poziţia sa originală cu proprietăţile top , right , bottom şi left.

absolute atrage un element din cele a fluxului normal al HTML-ului şi îl trimite într-o lume unde toate îi aparţin. În această lume puţin nebună, elementul absolute poate fi plasat oriunde pe pagina utilizând top , right , bottom şi left.

fixed se comportă ca absolute, dar el va pozitiona absolut un element în referinţă pentru fereastra browserului opus paginii de web, aşa încât, teoretic, elementele fixed trebuie sa ramână exact acolo unde acestea sunt pe ecran, chiar şi atunci când pagina este derulată.De ce teoretic? De ce altceva - aceasta funcţionează foarte bine în browsere cum ar fi Mozilla si Opera, dar în IE nu funcţionează la toate.

Layout folosind poziţionarea absolută

Puteţi creea două coloane layout, tradiţionale  cu poziţionarea absolute, dacă aveţi ceva de genul următorului cod HTML:

<div id="navigation">

<ul>

<li><a href="this.html">Asta</a></li>

<li><a href="that.html">Aceasta</a></li>

<li><a href="theOther.html">Altele</a></li>

</ul>

</div>

<div id="content">

<h1>Ra ra banjo banjo</h1>

<p>Bine ai venit pe pagina lui Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

Iar dacă se aplică următorul CSS:

#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }

Veţi vedea că acest lucru  va stabili bara de navigare în stânga, şi setează o laţime de 10 em. Pentru ca navigarea este pozitionată absolut, aceasta nu are nimic de a face cu fluxul restului paginii, aşa încât tot ceea ce a mai rămas necesar este de a stabili maginea stângă din zona de conţinut care să fie egală cu lăţimea barei de navigare.

Cât de uşor poate fi. Si tu nu eşti limitat la această abordare de două coloane.Cu o poziţionare inteligentă, puteţi să organizezi cât de multe blocuri doriţi. Dacă doriţi să adăugaţi o a treia coloană, de exemplu, aţi putea adăuga un “navigation2 ‘ părticică din HTML şi schimbi CSS-ul cu:

#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }

Singura chestie nasoală pentru poziţionarea absolută de elemente este că, deoarece ei trăiesc într-o lume a lor proprie, nu există nici o modalitate de a determina cu exactitate unde au sfârşit. Dacă aţi utiliza exemplele de mai sus, precum şi ca toate paginile dvs. să aibă mici bare de navigaţie şi zone mari de conţinut, ar trebui să fie bine, dar, mai ales atunci când se utilizează valorile relative pentru laţimi şi dimensiuni, deseori pierdeţi orice speranţă de a plasa ceva, precum un footer, alaturat acestor elemente.

Floating

Mobilizând un element îl va face să se mute la stânga sau la dreapta unei linii, cu conţinut de curgere in jurul jurul acesteia.

floating în mod normal, este folosit pentru a poziţiona elemente mai mici dintr-o pagină (în CSS-ul implicit pentru acest site, link-urile “Next Page”  Tutorial HTML pentru începători şi Tutorial CSS pentru începători . Vezi şi exemplul :first-letter, în Pseudo Elemente), dar poate fi de asemenea folosit cu părţile mai mari, cum ar fi navigarea coloanelor.

Luând exemplul codului HTML aferent, poţi introduce următorul cod CSS:

#navigation { float: left; width: 10em; } #navigation2 { float: right; width: 10em; } #content { margin: 0 10em; }

Dacă nu doriţi ca în următorul element să se alăture obiecte plutitoare, aveţi posibilitatea de a aplica proprietatea clear. clear: left va şterge elementele plutitoare din stânga, clear: right pe cele din dreapta şi clear: both le va şterge din ambele părţi.Deci, dacă, de exemplu, aţi vrut un subsol la pagina dvs., aţi putea adăuga o porţiune de HTML cu id-ul “footer“, apoi adăugaţi următorul CSS:

 #footer { clear: both; }

Şi iată-l aveţi.Un subsol, care va apărea sub toate coloanele, indiferent de lungimea oricăreia din ele.