[css] layout che sfasa!! 1help!!

[NoWhere]

argh, come dico sempre e come dicono solo i fumetti!!
questo layout mi manda matto!! [http://faber882.altervista.org/uffic.../index_03.html]
non riesco a capire perchè la colonna si allunga ed é ok, il corpo si allunga ed é ok, ma il contenitore rimane ferma e il tuto sfasa ed esce fuori dal div!!
[in precedenza avevo provato la soluzione layotu div header, div contenitore con dentro col e corpo e infine div footer = stesso problema!! -_-''

il codice css é direttamente dentro la pagina, se qualcuno mi può aiutare...

[funcool]

Mi sono permesso di correggerti l'indirizzo che era sbagliato...

Comunque dovresti usare il min-height e settarlo con la lunghezza della colonna di sinistra, leggi anche questo articolo.

le due colonne, sinistra e destra (che poi è il contenuto principale del sito), prova a chiuderle entrambe in un div...

[NoWhere]

le due colonne, sinistra e destra (che poi è il contenuto principale del sito), prova a chiuderle entrambe in un div...

un ennesimo div che le contenga?? non basta un main div che vqa a contenere head e questi 2 blocchi principali???!

min-height??! a-ah....


@fun, grazie x aver corretto l'url!! ;)

[heracleum]

Come detto in molti interventi ecco la regola d'oro:
"non c'è float senza clear"

Quindi nella riga prima della chiusura dell'ultimo div contenitore, in fondo alla pagina inserisci:

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

</body>

</html>

...e hai risolto.

prova a fare cosi:
#credits { width: 100%; margin: 1em 20px 0px 5px; text-align: right; font-style: italic; clear:both }

Dovresti ottenere che la colonna principale sia leggermente piu lunga

[NoWhere]

Come detto in molti interventi ecco la regola d'oro:
"non c'è float senza clear"

Quindi nella riga prima della chiusura dell'ultimo div contenitore, in fondo alla pagina inserisci:

<br style="clear:both" />


...e hai risolto.

mitico proverbio heracleumiano eheh!!
ma.. come mai e perchè un semplice spazio settato in clear [break o blocco p o div, credo che non cambi nulla] fa sì che i 2 div in questione nonsi sollevino da terra allungandosi senza portarsi dietro il container principale??! é questa la cosa che non capisco e che vorrei capire [oltre ovviamente alla soluzione per risolvere il problema!! eheh]

ho letto l'articolo e devo dire che non conoscevo bene questa funzionalità del min-height, ne farò tesoro!! ;)

per concludere o quasi, quindi conviene utilizzare la veloce solution clear o il settaggio del, direi del div contenitore prinipale, in min-height?? [devo ancora provarle entrambe]

[heracleum]

"to float" tradotto vuol dire "fluttuare" (oltre che in acqua anche in aria), quindi qualcosa che fluttua.. fluttuando per aria, sia a destra che a sinistra.. fluttua fuori dal contenitore
il clear evita proprio questo comportamento, che -non essendo per forza negativo come nel tuo caso- alle volte ovviamente può invece essere sfruttato appositamente.

L'altro div col contenuto della pagina, non fluttuando, forzava invece il contenitore.

Poi ocio, stiamo parlando del comportamento che dice w3c, e che si può riscontrare e abbiamo riscontrato -evidentemente un po' tutti- in Mozilla/Firefox..
mentre su IE la colonna fluttuante non usciva fuori neanche prima della modifica.


Riguardo il min-height.. sinceramente non ne immagino l'uso teso a risolvere questo caso ben preciso.

..visto soprattutto che l'altezza della colonna di sinistra dipende dal suo contenuto.. quindi come faccio a sapere quanti px (o altra misura) è alto? per settarla come min-height?

Personalmente risolverei col clear che ha come suo compito specifico proprio quello di controllare i floats.

[NoWhere]

"to float" tradotto vuol dire "fluttuare" (oltre che in acqua anche in aria), quindi qualcosa che fluttua.. fluttuando per aria, sia a destra che a sinistra.. fluttua fuori dal contenitore
il clear evita proprio questo comportamento, che -non essendo per forza negativo come nel tuo caso- alle volte ovviamente può invece essere sfruttato appositamente.

L'altro div col contenuto della pagina, non fluttuando, forzava invece il contenitore.

Poi ocio, stiamo parlando del comportamento che dice w3c, e che si può riscontrare e abbiamo riscontrato -evidentemente un po' tutti- in Mozilla/Firefox..
mentre su IE la colonna fluttuante non usciva fuori neanche prima della modifica.


Riguardo il min-height.. sinceramente non ne immagino l'uso teso a risolvere questo caso ben preciso.

..visto soprattutto che l'altezza della colonna di sinistra dipende dal suo contenuto.. quindi come faccio a sapere quanti px (o altra misura) è alto? per settarla come min-height?

Personalmente risolverei col clear che ha come suo compito specifico proprio quello di controllare i floats.

si, noi da gran volpini quali siamo abbiamo lavorato e dato per scontato su FF!! ^___^
ovviamente avevo fatto anche i test su ie e O e vedevo che ie mangiava il tuto senza crearsi problemi, ma siccome so precisino e siccome uso al 99,9% FF... capisci a mè!!

vado a farmi delle provette [magari se trovo tempo anche con la prima soluzione layout per vedere come se il clear risolve il problema anche con i div configurati colì!!]


EDIT: x info per tutti, ho provato la solution di hera e devo dire che funzia alla grande senza intoppi crossbrowser, anche mettendo dopo un ennesimo blocco div non ci son problemi!!