Aiuto immagine ad altezza variabile

[ivanisevic82]

Ciao ragazzi, ho bisogno di un aiuto.
Il mio sito conterra un immagine stretta e lunga che farà da "separatore verticale".
Per intenderci guardate la homepage: http://www.ivanisevic82.com/

Quella linea verticale l'ho dovuta mettere in un div apposito con float, perchè non potevo inserirla nè nella colonna principale ne in quella di destra, in quanto la loro lunghezza è variabile: a volte è più lunga l'una, a volte l'altra.

Per il momento in questo div creato apposta per il separatore ho adottato questa soluzione:

HTML:

<div id="Separatore">
<div id="TestaSeparatore">
</div>
<div id="CorpoSeparatore">
</div>
<div id="PiediSeparatore">
</div>
</div>

CSS:

#Separatore {
position: relative;
width: 5px;
margin-top: 20px;
float: right;
padding-right: 20px;
}

#TestaSeparatore {
background-image: url(/media/TestaSeparatore.jpg);
position: relative;
width: 5px;
height: 100px;
background-repeat: no-repeat;
padding-right: 20px;
}

#CorpoSeparatore {
background-image: url(/media/CorpoSeparatore.jpg);
position: relative;
width: 5px;
height: 400px;
background-repeat: repeat-y;
padding-right: 20px;
}

#PiediSeparatore {
background-image: url(/media/PiediSeparatore.jpg);
position: bottom;
width: 5px;
height: 10px;
background-repeat: no-repeat;
padding-right: 20px;
}

In pratica ho tre div: testa corpo e piedi, tutti infilati in un div che li contiene e determina il float e la posizione.

Ora io vorrei che la testa fosse sempre in cima, che i piedi fossere sempre in basso (la distanza delle essere relativa al footer) e che il corpo si estendesse per tutta la lunghezza "necessaria" per arrivare da testa a piedi.

In pratica dovrei dare questi ordini:

1) Piedi, state sempre attaccati al footer;
2) Corpo: estenditi per tutta la lunghezza, dalla fine della testa ai piedi.

Come posso fare?

Ho provato a dare ai piedi del sepatarote "bottom:0" e al corpo "heigt:100%" ma non funziona.

Grazie!