Div centrale, floating e clear:both
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.
Codice HTML:
<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>
Codice:
#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;
}
