Problema „float” in CSS

Defapt este mai mult neatentie decat o Problema dar m-am gandit sa scriu o mica rezolvare daca faceti vreaodata o greseala de genul:

Avem trei div-uri unul cu id=”content” unul cu class=”article” si unul cu class=”sidebar”.

<div id="content">
	<div class="article">
		<p>Lorem ipsum sit dolor amet</p>
		<p>Lorem ipsum sit dolor amet</p>
		<p>Lorem ipsum sit dolor amet</p>
		<p>Lorem ipsum sit dolor amet</p>
	</div>

	<div class="sidebar">
		<p>Lorem ipsum sit dolor amet</p>
		<p>Lorem ipsum sit dolor amet</p>
		<p>Lorem ipsum sit dolor amet</p>
		<p>Lorem ipsum sit dolor amet</p>
	</div>
</div>

In CSS am scris urmatoarele:

#content {
	background: blue;
	padding: 10px;
}

.article {
    float: left;
	background: yellow;
	padding: 10px;
}

.sidebar {
    float: left;
	background: green;
	padding: 10px;
}

Dupa cate vedeti .article si .sidebar sunt ambele cu float: left; ar trebui sa functioneze nu?
NU in nici un caz, trebuie neaparat sa punem float: left; si la #content pentru a afisa div-ul corect.

Rezolvarea:

#content {
	float: left;
	background: blue;
	padding: 10px;
}

.article {
    float: left;
	background: yellow;
	padding: 10px;
}

.sidebar {
    float: left;
	background: green;
	padding: 10px;
}

Eheeeeee, acum div-ul este afisat corect.
O greseala intalnita, acum aproximativ 1 an jumate cand am inceput sa folosesc CSS-ul, aceasta a fost prima mea greseala si am stat 30 de minute sa o rezolv.

Autor : thiefunu.