Ciao a tutti,
vorrei realizzare un layout con questa tipologia http://imageshack.us/a/img10/4605/layoutew.jpg
in cui il footer rimane sempre in basso alla pagina e soprattutto con il content che inizi sotto all' header e finisca prima del footer.
Sono riuscito in parte a realizzarlo utilizzando:

codice:
#container { 
   width:100%;
   min-height: 100%;    
   height: auto !important;    
   height: 100%;    
   margin: 0 auto -20px;
   background: url(images/bg1.png) repeat-y center;
   z-index:1;
}

#header {
    margin:0;
    width:100%;
    height:68px;
    background: url(images/bg2.png) repeat;
    z-index:1;
}

#push {   
   height: 20px;     
   clear: both;
}
   
#footer {
   margin:0;
   overflow:hidden;
   width:100%;
   height:20px;
   min-width:980px;
   background: url(images/bg2.png) repeat;
   text-align:center;
   line-height:20px;
   clear: both;
   z-index:1;
}


<div id="container">
  <div id="header">header</div>
  container
  <div id="push"></div>
</div>
<div id="footer">footer</div>
il problema è che lo sfondo del content mi va anche sotto all'header e al footer ed essendo entrambi trasparenti si vede il sormonto.. ecco qua il risultato http://imageshack.us/a/img507/8493/layout2y.jpg
Ho provato ad inserire un ulteriore DIV all'interno del content, ma non riesco a fare in modo che questo poi si estenda verticalmente per tutta la pagina come il DIV "padre", in pratica si estende solo fino al testo contenuto.
Un'idea per risolvere questo problemino?
Grazie
ciao