Layout Fluido - Livello contenitore non vede livelli al suo interno

[steinberg]

Ho questo layout:

<div style="border:1px solid black;background-color:#d4d4d4;">
  <div style="float:left;padding:5px;background-color:#a3a3a3;">
    colonna 
     di 
     sinistra


  </div>
  <div style="float:right;padding:5px;background-color:#a3a3a3;">
    colonna 
     di 
     destra


  </div>
  <br style="clear:both;" />
</div>

Su firefox ottengo l'effetto desiderato, ovvero una sorta di sfondo per entrambe le colonne.

Su internet explorer la visualizzazione è totalmente differente.

Sembra che il livello contenitore non veda i livelli contenuti (in realtà non li vedeva nemmeno firefox ma con il br li risolvo...), penso perché questi hanno proprietà float.

Non vorrei specificare l'altezza del livello contenitore perché tanto la colonna di sinistra quanto quella di destra possono variare in altezza... come si può fare?

grazie!

[Sky]

Aggiungi al div "genitore" la seguente proprietà:

height: 100%

E andrà bene anche con Internet Explorer, pur restando libero di espandersi in base al contenuto, dato che gli abbiamo impostato il 100% come altezza e non un'altezza fissa in pixel :)

[steinberg]

grazie!

Funziona ma non capisco bene il perché.

<div id="contenitore">
  <div id="livello1"  style="height:100%">
    <div id="livello2">
      ...
    </div>
  </div>
</div>

quando definisco height:100% sul livello1 pensavo che questo valore fosse riferito all'altezza del contenitore, quindi se contenitore è alto 1000px livello 1 prenderà 1000px.

così invece sembra che l'altezza 100% sia riferita al livello2, al contenuto praticamente, se livello2 è alto 100px allora livello 1 sarà alto 100px.

ho un po di confusione!

[Sky]

Ti dirò, non lo so nemmeno io di preciso, ho fatto una prova ed è venuto bene
Capita, ci si fa l'abitudine a queste stranezze. Poi sono un tantino rimbambito, specialmente oggi, quindi la risposta, se c'è, non la trovo e non la so spiegare

[steinberg]

ok! se qualcuno me lo sa spiegare è il benvenuto!

intanto grazie! ora il layout è presentabile

[Sky]

di nulla :)