Rezolvare simpla la o problema veche – div-uri si float-uri

Zilele trecute, in timp ce lucram la un site, am facut o descoperire care urmeaza sa-mi scuteasca mult timp, dar mai ales multa bataie de cap.

Multi dintre cei care fac webdesign s-au lovit la un moment dat de aceasta problema. Se da codul:

<div id="wrapper">
	<div id="header">
		<!-- Continut header -->
	</div>
	<div id="content">
		<!-- Continut principal -->
	</div>
	<div id="sidebar">
		<!-- Continut sidebar -->
	</div>
	<div id="footer">
		<!-- Continut footer -->
	</div>
</div>

Totul este minunat pana ajungem la partea cu continut si incepem sa folosim float-uri. De obicei CSS-ul pentru un astfel de layout arata asa:

#wrapper {
	width: 980px;
	margin: 0px auto 2px auto;
}

#header {
	width: 100%;
	float: left;
}

#content {
	width: 640px;
	float: left;
}

#sidebar {
	width: 340px;
	float: left;
}

#footer {
	width: 100%;
	float: left;
}

*Bineinteles ca acesta nu este CSS-ul complet. El ofera doar structura de baza a layout-ului.

Acum structura pare completa, dar exista o problema. Toate elementele din pagina sunt “float-ate”, mai putin unul: div-ul cu id=”wrapper”. Acest lucru, face ca div-ul numit in mod sugestiv “wrapper” sa nu se mai “infasoare” in jurul continutului.

Ce inseamna asta de fapt? Sa zicem ca vrem sa delimitam marginile site-ului cu un border. Vom avea un cod care arata asa:

#wrapper {
	width: 980px;
	margin: 0px auto 2px auto;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
}

Din pacate, in loc sa vedem un border de-a lungul site-ului pe ambele parti, se va vedea un border “inghesuit” in partea de sus a site-ului. Motivul, este cel despre care vorbeam mai devreme. div-ul “wrapper” nu mai cuprinde toate celelalte elemente pana in partea de jos. El sta in partea de sus ca si cand ar fi gol.

Exista cateva solutii la aceasta problema. Ele sunt dupa cum urmeaza:

Prima solutie se foloseste de element-ul “footer” pentru a rezolva problema. Codul arata asa:

#footer {
	width: 100%;
	float: left;
	clear: both;
}

In felul acesta div-ul “wrapper” se intinde din nou pe toata suprafata site-ului. Problema apare atunci cand nu avem un element “footer” (problema poate aparea si la sub-elemente din pagina).

O alta metoda (care poate compensa cazul de mai sus), presupune folosirea unul pseudo-selector mai putin folosit. Codul arata asa:

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

Aceasta metoda foloseste acelasi princpiu cu cea dinainte, doar ca nu prespune tag-uri suplimentare in cod, ceea ce inseamna ca poate fi folosit in mod mai versatil.

Cea de-a 3-a metoda, cea pe care am descoperit-o de curand, este cea mai simpla si mai versatila dintre toate. Codul arata asa:

#wrapper {
	width: 980px;
	margin: 0px auto 2px auto;
	overflow: auto;
}

Se pare ca atunci cand setam proprietatea “overflow” pe auto, div-ul isi da seama ca trebuie sa se infasoare in jurul continutului.

Aceasta din urma este metoda mea preferata, mai ales pentru ca pare sa mearga in toate browser-ele (cel putin in cele testate de mine).