footer e sfondo

[Kyncaid]

salve, so gia' che questo argomento e' stato ampiamente trattato ma nel forum vedo continui rimandi alla guida che ho gia' seguito e che non mi sta risolvendo il dilemma.

la mia pagina e' bene o male strutturata cosi

<container>
<header></header>
<visual></visual>
<wrapper>
<content></content>
<navigation></navigation>
<extra></extra>
</wrapper>
<footer></footer>
</container>


quella che chiamo wrapper e' sostanzialmente la parte dedicata ai contenuti e divisa in 3 colonne, una centrale dominante con i contenuti e due laterali accessorie.

Sono riuscito a realizzare il footer ma quando il contenuto supera la pagina mi si verifica quella sgradevole sovrapposizione e la guida non mi ha risolto nulla.
Inoltre il wrapper dovrebbe avere uno sfondo (fotografico) e quando il contenuto invece e' troppo corto non viene visualizzato interamente.



alcune parti del css

html,body{
    margin:0;
    padding:0;
    height: 100%;
}
body{
    font: 76% arial,sans-serif;
    text-align:center;

div#container{
position: relative;
    text-align:left;
    width:754px;
    margin:0 auto;
    height:100%;
}
body>div#container{height:auto;min-height:100%}


div#content{
position: relative;
margin: 0 150px;
padding: 0 1.5em 5em}

div#content p{
    line-height:1.4
    }
div#navigation{
padding-top:10px;
    /*background:#B9CAFF;*/
    float:left;
    width:150px;
    margin-left:-754px
}
div#extra{
padding-top:10px;
    /*background:#FF8539;*/
    float:left;
    width:150px;
    margin-left:-150px
}

div#wrapper{

padding-top:10px;
background:url('../images/body_bg.jpg');
    float:left;
    width:100%;
    height:100%;

}
div#footer{

    background: #333;
    color: #FFF;
    clear:left;
    width:754px;
    bottom: 0;
    padding: 0.5em 0;
    position:absolute;
    width: 100%
}