Div con float dentro container full-width-height

[Daniele87]

Ciao. Ho un problema ricorrente con molti layout che mi capita di realizzare.
Quando ho due div affiancati con float:left dentro un altro div container con height:100%, se ridimensiono la pagina, il div di destra scende giù, andando a capo.
Tutto ok, se non fosse che il container non si allunga, ridimensionandosi per contenere il mio div. Semplicemente rimane lungo uguale e il div incriminato esce dal container.

Per farmi capire meglio, guardate questa pagina e provate a restringere la finestra: il div verde va sotto quello di sinistra, ma il container blu non si ridimensiona (il codice fa schifo, ma l'ho fatto velocemente solo come esempio). Ciò succede con IE7 e FF. Solo IE6 fa come vorrei.

Come si può risolvere questo problema, considerando che devo applicarlo ad un sito con layout full-width, dove chi ha risoluzione minore deve visualizzare i vari box (col float:left) uno sotto l'altro?

Grazie per un futuro aiuto!

[Stainboy]

position: relative?
mi sembra ovvio che il 100% non basta, io stesso ho una risoluzione molto alta avendo uno schermo 16:9 24" e ugualmente devo scrollare per vedere lo sfondo blu.. prova a impostarlo in pixel e non in percentuale

[Daniele87]

Si, ma il problema non è questo. Guarda, ho reso l'esempio un po' più simile alla mia pagina reale: ho aggiunto gli angoli al container.
Come ho detto, il problema sta nel fatto che se hai una bassa risoluzione (o se restringi la finestra diminuendo la larghezza), il div si sposta sotto, ma il container non si adatta e il div esce.
Se metto in pixel come suggerisci non cambia niente, anzi penso sia ancora peggio perchè fisso le dimensioni maggiormente.
position: relative dove dovrei metterlo? :master:

[fcaldera]

height: auto;
overflow: hidden;

al contenitore

[Daniele87]

Grandioso, grazie! Già questo risolve gran parte del problema (vedi pagina modificata).

Rimane ancora un'ultima questione, se non chiedo troppo: così l'height è, appunto, auto; a me servirebbe al 100%. Alcune pagine hanno magari poche righe di contenuto e sarebbe meglio se il layout non fosse alto come il testo, ma esteso a tutta altezza.
Se lascio overflow:hidden, ma height:100% non funziona, perchè il div esce nuovamente (pur nascondendo la parte fuori dal container).

Pensi sia possibile avere entrambe le cose in qualche modo? overflow:hidden e full-height?

Grazie ancora

[fcaldera]

Originariamente inviato da Daniele87
Grandioso, grazie! Già questo risolve gran parte del problema (vedi pagina modificata).

Rimane ancora un'ultima questione, se non chiedo troppo: così l'height è, appunto, auto; a me servirebbe al 100%. Alcune pagine hanno magari poche righe di contenuto e sarebbe meglio se il layout non fosse alto come il testo, ma esteso a tutta altezza.
Se lascio overflow:hidden, ma height:100% non funziona, perchè il div esce nuovamente (pur nascondendo la parte fuori dal container).

Pensi sia possibile avere entrambe le cose in qualche modo? overflow:hidden e full-height?

Grazie ancora

non puoi spostare gli elementi grafici del layout ad un contenitore ancora più esterno (al quale dare un min-height)?

[Daniele87]

Non ho ben capito come dici di posizionarli.
Però ho provato a mettere min-height:100% ad ognuno dei div annidati. Funziona, se non fosse che il container si allunga, ma il div figlio rimane lungo quanto il contenuto così che l'angolo in basso a destra non chiude il layout.
Vedi la solita pagina di esempio...

Grazie per la pazienza!

[Daniele87]

Il problema persiste.

Un altro aiutino, please?

[Daniele87]

Tra l'altro, su IE l'angolo in basso a destra non scende a fondo pagina, mentre su FF rimane in alto... boh...
Non so proprio dove sbattere la testa. Eppure penso sia un problema comune: due div float dentro a un div contenitore con full-height! Come si risolve?

[Daniele87]