CSS layout part 2

In postarea anterioara paginii noastre inca ii lipseste o parte esentiala: pozitionarea coloanelor pe orizontala una fata de celalalta. Pentru ca nu am specificat acest lucru, pozitionarea pe care o observam este una pe verticala. A venit momentul sa schimbam aceasta pozitionare.

Pentru ca deocamdata specificatia de CSS nu prevede explicit instructiuni pentru un layout de tip coloane vom apela la proprietatea css float. Desi nu a fost introdusa pentru construirea de coloane, ea este adesea folosita in acest scop.

Numele proprietatii vine de la faptul ca o imagine pare ca pluteste deasupra unui text. De fapt imaginea se afla intr-un colt iar textul se desfasoara in dreapta si sub aceasta (daca utilizam float:left)

Pentru a realiza layoutul pe care ni l-am propus vom seta aceasta proprietate pe cele 3 sectiuni care trebuie sa se afiseze pe coloane:

.left-sidebar{
float:left;
}

.main {
float:left;
}

.right-sidebar {
float:left;
}

Pentru sectiunea footer va trebui sa specificam ca vrem sa revenim la pozitionarea implicita astfel:

.footer{
clear:both;
}

Pagina rezultata in urma acestor modificari o putem vedea aici: multi column layout