[CSS] Non riesco ad estendere il contenuto di una colonna fino alla fine del suo cont

[e-commerce84]

Ciao,
stò sviluppando un layout tabless HTML\CSS partendo da un file psd ed ho qualche problemino, vi spiego subito

Questa immagine rappresenta il risultato che dovrei ottenere alla fine:



Mentre questo è il risultato HTML\CSS che ho ottenuto: http://onofri.org/example/WebTemplate/

Come potete notare immediatamente c'è un errore evidente ovvero che la colonna sinistra non arriva fino alla fine del suo container e non matcha quindi con l'immagine di background del footer lasciando uno spazio bianco.

La colonna destra (il div #sidebar) è all'interno del div #container e contiene a sua volta 3 box (rispettivamente i div #a (box arancione), #b (box giallo) e #c (box blu)

Proprio il box blu non matcha. Attualmente tale box #c ha una min-height: 234px;

Se aumento tale valore (ad esempio portandolo a 334px) allora il problema non si presenta ma non è una soluzione in quanto se la pagina contenesse più contenuti e si sviluppasse maggiormente in verticale si ripresenterebbe. Ho provato anche a settare tale valore a 100% ma non funziona

Credo che ci sia qualcosa di sbagliato nella mia impostazione.

Come posso fare in modo che la colonna di destra #sidebar arrivi fino alla fine del suo contenitore?

Grazie mille

Andrea

[wingman87]

Che io sappia non esiste un modo "pulito" per farlo con solo CSS, il mio consiglio è di lasciar perdere quel tipo di comportamento, se invece lo vuoi fare proprio così scriverei tre righe di javascript per adattare l'altezza del div blu.
Con lasciar perdere quel comportamento intendo che io attaccherei il bottom del div blu al div stesso (aggiungendo un altro div subito sotto) e quando il contenuto va oltre semplicemente la sidebar non lo segue...

[kwb]

Concordo. Penso che l'unico modo sia usare JS per risolvere la questione.
Tra l'altro guardando il codice, dovresti usare anche il clearfix che non stai usando per il #container: ha dimensione 0 ( causata dai float dei div dentro )
http://nicolasgallagher.com/micro-clearfix-hack/

EDIT: Ci tengo a precisare che molto probabilmente l'adozione di JS è obbligata in questo caso. Trovo difficile pensare ad una strategia per unire il fondo della barra con il resto senza usare JS, perchè la posizione verticale del footer è determinata dal più lungo elemento tra la #sidebar e #content.

[e-commerce84]

Ragazzi in realtà alla fine mi sembra che il problema fosse un problema di magin, infatti cambiando questo blocco

.item p {
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 10px 0;
}

in questo modo:

.item p {
    font-size: 1.1em;
    line-height: 1.5em;
    margin-top: 10px
}

sembra funzionare bene ed arriva fino alla fine senza dover usare javascript, ma...secondo voi è una soluzione pulita?

[kwb]

Originariamente inviato da e-commerce84

Ragazzi in realtà alla fine mi sembra che il problema fosse un problema di magin, infatti cambiando questo blocco

.item p {
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 10px 0;
}

in questo modo:

.item p {
    font-size: 1.1em;
    line-height: 1.5em;
    margin-top: 10px
}

sembra funzionare bene ed arriva fino alla fine senza dover usare javascript, ma...secondo voi è una soluzione pulita?

Secondo me non funziona.. Infatti io ora lo vedo come prima..
Come ti ho spiegato non può funzionare solo tramite css perchè sia il contenuto principale che la sidebar sono dentro il container.
La lunghezza del container determina il posizionamento del footer ( e quindi la parte finale della sidebar anche! ).
La lunghezza del container è uguale alla lunghezza massima tra il div del contenuto e quello della sidebar.
Ora, se la sidebar è più lunga del contenuto, allora si vedrà correttamente.
Ma se la sidebar è più corta del contenuto, il problema rimane.

[airon]

Ciao,

una soluzione solo css è possibile. Si tratta di implementare quelle che in gergo sono le "faux coloumns".

Si tratta di mettere un backgroud che si ripete al #container. In questo caso è un po' complicato dato che la sidebar è suddivisa in tre colori e ha dei gradienti.
Io proverei a fare una png trasparente per la parte di content di sx e azzurra della larghezza della sidebar per la parte di dx.
Molto probabilemente ci saranno dei problemi coi gradienti e il far combaciare lo sfondo ma credo sia risolvibile. Dovrei metterci le mani sopra direttamente.

Cerca di provarci da solo, così impari cose nuove, nel caso ti aiuto col codice.

Come ti è stato detto usa i clearfix così che il #container sia efettivamente lungo come il più lungo dei suoi contenuti.

Ciao

[kwb]

Originariamente inviato da airon

Ciao,

una soluzione solo css è possibile. Si tratta di implementare quelle che in gergo sono le "faux coloumns".

Si tratta di mettere un backgroud che si ripete al #container. In questo caso è un po' complicato dato che la sidebar è suddivisa in tre colori e ha dei gradienti.
Io proverei a fare una png trasparente per la parte di content di sx e azzurra della larghezza della sidebar per la parte di dx.
Molto probabilemente ci saranno dei problemi coi gradienti e il far combaciare lo sfondo ma credo sia risolvibile. Dovrei metterci le mani sopra direttamente.

Cerca di provarci da solo, così impari cose nuove, nel caso ti aiuto col codice.

Come ti è stato detto usa i clearfix così che il #container sia efettivamente lungo come il più lungo dei suoi contenuti.

Ciao

Wow, non conoscevo .
Cmq, qua ci sono diversi metodi: http://www.vanseodesign.com/css/equal-height-columns/

EDIT: Tra l'altro, non vorrei dire boiate, ma penso che con CSS3 ( leggasi gradienti ) si possa risolvere il problema del primo approccio, ovvero il dover utilizzare un'immagine.

[airon]

Ciao,

si volendo si possono usare i background multipli e quindi i gradienti per evitare l'immagine. Ma così facendo tagli fuori il caro amato IE

Se non ricordo male infatti i gradienti hanno un filtro per farli funzionare su ie 6-9 ma permettono solo 2 stop quindi un solo gradiente e non due

Io me ne infischierei per una richiesta in più. Metti l'immagine in un'altra sprite che già scarichi e sei a posto