Problema con div e dimensioni

[radiodelmomento]

Il mio problema è che il div interno con height:48px viene inserito dentro un div con dimensioni minori. In quest'ultimo div, come potete notare da immagini e relativo codice, non viene impostata un'altezza, quindi non capisco come mai le dimensioni non siano quelle dell'elemento interno più grande.

<div style="border:1px solid #CCC;background:#FFF;padding:10px;border-radius:4px;margin-top:-10px; content:inherit">
    <div style="float:left;margin-right:5px;width:48px;height:48px"><a href="abc" style="float:left"><img src="abc"></a></div>
    <div><b><a href="abc">text</a></b>
    <br>h</div>
</div>

Grazie come sempre.

[karl94]

Perché il div è flottante. Gli elementi figli che hanno la proprietà CSS float diversa da none non vengono considerati per il calcolo dell'altezza del contenitore quando questo ha la proprietà height impostata su auto e se è di tipo blocco con overflow visible. Vedi le specifiche: http://www.w3.org/TR/CSS21/visudet.html#normal-block.

Per ovviare a ciò puoi:

• aggiungere un elemento in-flow alla fine del contenitore che si posizioni sotto l'elemento con il float, ovvero aggiungere un elemento vuoto con la proprietà CSS clear impostata su both. L'elemento non deve essere necessariamente presente nel documento HTML, in quanto si possono sfruttare gli pseudo elementi CSS:

  tuoselettore:after{
  	content: "";
  	clear: both;
  	display: block;
  }

• Impostare proprietà overflow dell'elemento contenitore su un valore differente da visible. In questo modo le regole per determinare l'altezza dello stesso cambiano: http://www.w3.org/TR/CSS21/visudet.h...ck-root-margin.

[radiodelmomento]

Proprio come pensavo.
Nella seconda soluzione, l'attributo "content" sarebbe il contenuto dell'elemento che viene creato?
Poi "tuoselettore" sarebbe il div assoluto (quello non flottante) oppure quello all'interno?
Se "clear: both" serve, in un certo senso, a "resettare" il float, aggiungendo questo div dopo l'elemento flottante, quest'ultimo continuerà ad esserlo, o sbaglio?
Te lo chiedo perché ho provato ad utilizzare quel codice css senza ottenere alcun risultato (non funziona nemmeno se creo il contenitore direttamente senza css).
La spiegazione è ottima come sempre

P.S.: ho cambiato un po' il layout (non per questo problema) per cui ho risolto, ma non mi dispiacerebbe imparare qualcosa che non so

[karl94]

Proprio come pensavo.
Nella seconda soluzione, l'attributo "content" sarebbe il contenuto dell'elemento che viene creato?

Quella è la prima soluzione.
Sì, la proprietà CSS content è applicabile solo per gli pseudo elementi, ed il suo valore diviene il contenuto dello stesso.

Poi "tuoselettore" sarebbe il div assoluto (quello non flottante) oppure quello all'interno?

Nel codice che hai indicato tu sarebbe quello più esterno, ossia il contenitore.

Se "clear: both" serve, in un certo senso, a "resettare" il float, aggiungendo questo div dopo l'elemento flottante, quest'ultimo continuerà ad esserlo, o sbaglio?

Più o meno, un elemento in-flow con la proprietà CSS clear impostata su both deve venire posizionato (traslandolo verso il basso) in modo che né a destra né a sinistra si trovi un elemento flottante.

Te lo chiedo perché ho provato ad utilizzare quel codice css senza ottenere alcun risultato (non funziona nemmeno se creo il contenitore direttamente senza css).

Quello perché mi sono dimenticato di specificare che l'elemento deve essere di tipo blocco, e che quindi bisogna specificare display: block all'interno della regola con lo pseudo elemento (ho corretto il messaggio).

Ho preparato un piccolo esempio: http://dabblet.com/gist/8219789.

[radiodelmomento]

Capito tutto, grazie mille