Un div che contiene elementi float non si espande in altezza

**rodolfo62** · 04-03-2009, 06:27

Buongiorno a tutti.

Data la mia inesperienza con i CSS mi trovo in questo pasticcio. Ho una serie di miniature affiancate per mezzo di "float: left" e margini ben calcolati. Fin qui tutto a posto. Il guaio comincia quando le miniature diventano parecchie.
L'elemento div che le contiene non si espande e le miniature mi vanno a coprire gli elementi successivi della pagina. Questo mi costringe a settare manualmente e volta per volta la proprietà "height" del div contenitore.
E' un comportamento normale in presenza di float o sono io che sbaglio qualcosa?

Grazie

**ricman** · 04-03-2009, 10:05

Hai già provato il "clear"?

codice:

<div id="miniature">
  <div>mini</div><div>mini</div><div>mini</div><div>mini</div><div>mini</div>
</div>

<div style="clear: both;">
  roba sotto le miniature...
</div>

**Mich_** · 04-03-2009, 10:05

Da quanto scrivi, io ci leggo un errore di impostazione del CSS (o della marcatura).
Pero` da quel poco che dici non si puo` capire il tipo di errore.

Effetti di quel tipo succedono, ad esempio:
- quando si usano posizionamenti
- quando si dimentica il clear
- quando si danno dimensioni fisse

Prova a fornire il link alla pagina; o, in subordine, posta il codice HTML+CSS dei blocchi interessati (oltre al DOCTYPE). Di' anche in quali browser hai testato, e se l'effetto e` uguale in tutti.

**emnlmn** · 04-03-2009, 13:51

Provato

codice:

overflow:hidden;

tra le regole del contenitore delle miniature?

**rodolfo62** · 04-03-2009, 21:37

Risolto

In effetti l'errore stava nell'aver dimenticato il clear, o meglio, mancava un elemento che avesse clear tra le sue regole. Ho aggiunto un div vuoto con questa caratteristica e tutto è andato a posto. Allego di seguito il codice sia della pagina che del CSS:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">



<head>

   <title>Prova Float</title>

<link rel="stylesheet" type="text/css" href="/stili/float.css" />

</head>



<body>

      <div id="wrapper">

          <div class="miniatura">

          <div>

          [img]/immagini/segnaposto.jpg[/img]

          </div>[url="cascata.php"]Titolo foto[/url]

          </div>



          <div class="miniatura">

          <div>

          [img]/immagini/segnaposto.jpg[/img]

          </div>[url="cascata.php"]Titolo foto[/url]

          </div>



          <div class="miniatura">

          <div>

          [img]/immagini/segnaposto.jpg[/img]

          </div>[url="cascata.php"]Titolo foto[/url]

          </div>



          <div class="miniatura">

          <div>

          [img]/immagini/segnaposto.jpg[/img]

          </div>[url="cascata.php"]Titolo foto[/url]

          </div>



          

          <div id="terminale"></div>



    </div>

</body>



</html>

codice:

#wrapper {
width: 850px;
height: auto;
margin: 0px auto 0px auto;
background-color: #FFCCFF;

}

#terminale {
width: 850px;
height: 15px;
background-color: #FF66FF;
clear: both;

}

.miniatura {
width: 192px;
height: 155px;
margin: 0px 0px 35px 18px;
float: left;

}

.miniatura div {
width: auto;
height: auto;
background-color: #EDF7E0;
border: solid 1px #183320;

}

Grazie a tutti

Discussione: Un div che contiene elementi float non si espande in altezza

Strumenti discussione

Ricerca discussione

Visualizza

Un div che contiene elementi float non si espande in altezza

Permessi di invio