Per contenere il float conosco 3 tecniche, quelle spiegate in questa pagina ma tutte e tre non sono esenti da problemi. Finora io ho usato la prima (via markup) e la terza (simple clearing of floats) a seconda dei casi.
Ora sto facendo una pagina semplicissima: un div con dentro un h1 e un'immagine float. non posso usare il simple clearing of floats perché con 100% di larghezza IE mi fa il div più largo dello schermo (copla della scrollbar credo), se invece uso il clear magicamente mi fa sparire il titolo!
codice css
codice:
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFF;
color: #333;
margin: 0;
}
div.clearer {
clear: both;
}
div#header {
background: #F4F4F4;
padding: 5px 10px;
border-bottom: 1px solid #666;
}
div#header h1 {
font-size: 18px;
margin: 0;
padding: 15px 0 0;
}
codice xhtml
codice:
<div id="header">
<a href="http://alexwd.altervista.org/">
[img]../gif/awd.gif[/img]</a>
<h1>Raccolta personale di faccine</h1>
<div class="clearer"></div>
</div>