Non riesco ad estendere il contenuto di una colonna fino alla fine del suo container

[AndreaNobili]

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

[webbeloz]

controlla i tuoi

z-index:xx;

[AndreaNobili]

Originariamente inviato da webbeloz
controlla i tuoi

z-index:xx;

Ciao,
nel mio codice CSS non è presente nessun z-index

Comunque sia sembra che la situazione sia risolta cambiando:

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

in

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

in pratica andando a togliere il margine dei paragrafi dentro gli oggetti avente classe item, o ancora meglio andando a sostituire il margin con un margin top (per distanziare tra loro i paragrafi dentro gli oggetti item):

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

Funzionare funziona ma non sò se è un barbatrucco e se la cosa si possa fare meglio appunto con lo z-index che da quello che vedo serve a "sovrapporre" elementi.

Eventualmente secondo te su cosa potrei provare a mettere lo z-index?

Grazie
Andrea

[webbeloz]

se hai notato, si interrompe proprio dove hai box-shadow:

quindi per scongiurare il barba/trucco

meglio se piazzi qualche z-index: che mette a tacere qualsiasi browser, dato che alcune cose in firefox potrebbero essere ok,ma poi in safari e Chrome tuttaltro....

[AndreaNobili]

Originariamente inviato da webbeloz
se hai notato, si interrompe proprio dove hai box-shadow:

quindi per scongiurare il barba/trucco

meglio se piazzi qualche z-index: che mette a tacere qualsiasi browser, dato che alcune cose in firefox potrebbero essere ok,ma poi in safari e Chrome tuttaltro....

in realtà avevo provato anche a rimuovere la shadowbox ed il problema persisteva...cmq per capire bene..te su quali elementi piazzeresti lo z-index, ho fatto qualche prova ma non ottengo risultati...qualche hint?

[webbeloz]

bè, se tieni una parte della sidebar dentro il footer, per forza avrai quel taglio...

rivedi html, e metti la sidebar con z-index:10;
e tutto il footer, con z-index:9;



scegli tu il numero, basta che footer sia di valore inferiore di sidebar.

[AndreaNobili]

Originariamente inviato da webbeloz
bè, se tieni una parte della sidebar dentro il footer, per forza avrai quel taglio...

rivedi html, e metti la sidebar con z-index:10;
e tutto il footer, con z-index:9;



scegli tu il numero, basta che footer sia di valore inferiore di sidebar.

Rivedi l'html in che senso? Devo cambiare qualcosa nell'html? non devo tenere la parte finale (l'immagine) nel footer?

[webbeloz]

nel tuo esempio, non vedo esperimenti...
Devi separare sidebar da footer, e alzare con z-index la sidebar
il footer, lo pazzi sotto... con z-index inferiore e poi lo fai flottare quanto basta
per andare leggermente sotto a sidebar.