Cand lucrezi cu DIV-uri (cum fac eu de ceva vreme), daca vrei sa obtii un layout care sa se lungeasca in jos atat cat il forteaza continutul, esti obligat sa lucrezi cu FLOAT-s. Adica cu DIV-uri pozitionate RELATIVE si care au setat float:left sau float:right.

Problema
Problema este ca modelul de redare vizuala al FLOAT-ului este unul arhaic, de pre vremea cand un float se limita la proprietatea align:left / align:right pentru < IMG >-uri, care permitea textului sa curga pe langa o imagine (sa faca “text-wrap”). In perioada aceea, notiunea de float se limita la < IMG > si < P >. Ce rezulta din modelul gandit atunci? Ceva cam ca in urmatoarea imagine:

Daca te uiti atent, vezi ca imaginea inclusa in primul < P > (figurata cu magenta in desen) are align = ” left ” (echivalentul functional al lui float: left; in CSS), ceea ce face ca < P > -urile (inclusiv cele ulterioare) sa curga fluent pe langa ea. Foarte bine si frumos.

Dar ce te faci cand vrei ca imaginea/floatul respectiv sa “forteze” inaltimea holderului in care se afla? Ce te faci daca vrei ca < P > -ul care contine imaginea sa se intinda in jos in asa fel incat sa includa complet imaginea? Asta la un tabel era usor, dar la un DIV nu mai e la fel de usor.

De ce? Poi, am zis mai devreme: pentru ca, atunci cand au conceput si creat specificatia pentru modelul de FLOAT, dragii de baieti de la W3C asa au considerat ca e mai natural si firesc comportamentul de mai sus. Ce rezulta pentru coder? Durere de cap, pentru ca nu numai ca e o problema destul de serioasa, dar trebuie rezolvata si cross-browser…

Solutia?

In urma testarii a tot felul de nebunii, s-au observat diverse solutii pentru diverse browsere.

De pilda, in IE era suficient sa setezi un height al DIV-ului, ca s-o rezolvi. Si, ca sa nu afectezi layoutul, cel mai bine era sa setezi height-ul respectiv la 1% – ca oricum IE isi intindea DIV-urile cat ii trebuia, trecand peste acel height ca prin branza.

Dar asta nu mergea in FF – ba, mai mult, nu avea nici un efect. In schimb in FF era swuficient sa itroduci de mana, la sfarsitul DIV-ului cu pricina, un element care sa aiba proprietatea CSS clear:both. Asta forta DIV-ul sa se intinda dincolo de acel element bagat cu forta, pentru ca clear-both nu permite nici unui alt element sa se gaseasca pe linie cu el, si deci forta DIV-ul sa se intinda dedesupt. Ca sa intelegi mai bine, am mai prestat un desen:

(borderul acela albastru din jurul acelui punct semnifica efectul lui clear-both;)

Dar cum e destul de ne-elegant sa te apuci sa inserezi cod de mana in HTML doar ca sa rezolvi o problema, atunci s-a gasit o alta solutie: sa se profite de o proprietate CSS specifica FF-ului, si anume content: “”;. Ce face asta? poi iti permite sa bagi in HTML cod din CSS. Evident, merge doar in FF, dar e foarte utila.

Cum putem aplica cele 2 solutii de pana acum, aici?

FF:

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

IE:

* html .clearfix {height: 1%;}

Dupa care, in HTML, ii adaugam DIV-ului pe care vrem sa-l extindem clasa clearfix. Si asa ajungem la vestita solutie “CLEARFIX”, care a scos multi html-isti din cacao pana acum:

.clearfix:after  {content: "."; display: block; height: 0;
                  clear: both; visibility: hidden;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Dar ce te faci ca a aparut IE7 pe piata… Care IE7 nu se mai intelege bine cu CLEARFIX… Ce te faci? Iei toate site-urile facute pana acum la mana si le re-codezi doar pentru ca au inceput sa apara clienti care “nu vad bine sinte-ul pe IE7”???? MULTA carne si-a mai luat in gura, in frigider, in congelator si in familie nenea gates cu porcaria asta de ultima versiune… Asta dupa ce-au mai avut si tupeul sa anunte ca e versiunea finala, ca dupa asta – gataa! – nu vor mai implementa nimic nou in materie de suport CSS.

Noroc ca s-au gasit (IAR) testeri de bine care au calarit problema pe toate fetele, si-au descoperit solutia: modifici DOAR CSS-ul, si de-acolo DOAR sectiunea de CLEARFIX, dupa cum urmeaza:

.clearfix:after {content:"."; display:block; height:0;
                 clear:both; visibility:hidden; }
.clearfix       {display:inline-block;}
/* Hide from IE Mac */
.clearfix       {display:block;}
/* End hide from IE Mac */

Odata re-definita doar bucatica asta de cod CSS, totul revine la normal si functioneaza OK in IE, IE7 si FF. Bravo, baieti! M-ati salvat de MULTE transpiratii inutile.