Div centrale, floating e clear:both

[miki92]

Buonasera,
scusate ma non sapevo che titolo utilizzare.

Ho ripreso (finalmente!) un vecchio lavoro che avevo da parte e dato che non mi piaceva l'ho riscritto con nuovi codici in HTML5 e CSS3.
Il problema mi si è presentato quando sono andato a creare il layout a 3 colonne.

Ho inserito del contenuto floattante nella colonna centrale e poi dopo questo ho messo un "clear:both" (sempre all'interno della centrale) dopodichè ho notato che compariva un enorme spazio e dopo varie prove ho visto che il contenuto dopo il clear rispetta non solo la colonna centrale ma anche quella di destra.

Ho sempre creato layout simili a questo senza problemi ma oggi non capisco proprio perchè ottengo questo risultato. Posto screen e codice interessato.

	<div id="pagina">
		<aside id="sx">
			<section>
				<h3>h3</h3>
				<p>Testo</p>
			</section>
			<section>
				<h3>h3</h3>
				<p>Testo</p>
			</section>
		</aside>
		<aside id="dx">
			<section>
				<h3>h3</h3>
				<p>Testo</p>
			</section>
			<section>
				<h3>h3</h3>
				<p>Testo</p>
			</section>
			<section>
				<h3>h3</h3>
				<p>Testo</p>
			</section>
		</aside>
		<div id="cx">
<!-- Pagina -->
			<div class="grids">
				<div style="border:1px blue solid;">
					A
				</div>
				<div style="border:1px green solid;">
					B
				</div>
				<div style="border:1px red solid;">
					<div style="border:1px deeppink solid;">
						C
					<br>c<br>c<br>c</div>
					<div style="border:1px magenta solid;">
						D
					</div>
				</div>
			</div>
			<hr style="clear:both">
			
			<div class="grids">
				<div style="border:1px blue solid;">
					A
				</div>
				<div style="border:1px green solid;">
					B
				</div>
				<div style="border:1px red solid;">
					<div style="border:1px deeppink solid;">
						C
					</div>
					<div style="border:1px magenta solid;">
						D
					</div>
				</div>
			</div>
<!-- Pagina -->
		</div>
	</div>

#pagina{
	margin:2px;
}
#sx{
	float:left;
}
#dx{
	float:right;
}
#sx, #dx{
	width:19%;
}
#cx{
	float:inherit;
	margin:0 auto;
	width:57%;
}
#sx, #cx, #dx{
	background:#FFF;
	/*border:1px #CCC solid;*/
	border-radius:3px;
	padding:7px;
}

Aggiungendo a #cx (il contenitore che vuoi rendere "indipendente") l'attributo overflow con valore hidden dovrebbe funzionare

[miki92]

Ottimo. Problema risolto.
Non ci avrei mai pensato!