footer posizionato in basso ma il content si deve adattare al contenuto della pagina

[fairydesign]

Ciao a tutti,
sto cercando di realizzare una pagina che abbia sempre il footer posizionato in basso.
Il mio problema sorge quando il content deve avere il float:left per adattarsi al contenuto della pagina:

questo è il css:

body{
margin:0 auto;
height:100%;
text-align: center;
background:#fff url(.../images/sf_home.jpg) top left repeat-x;
}

#container{
position:relative;
width: 938px;
height: 100%;
margin: 0 auto;
text-align: left;
background-color:#FF6600
}

body>div#container{height:auto;min-height:100%}

#header{
width:938px;
height:151px;
background-color:#FFFF00;
margin-top:20px;
}

#box{
width:922px;
height:282px;
margin:7px 0 17px 0;
border:8px solid #e5581c;
}

#navigation{
width:938px;
height:60px;
background-color:#330099
}

#content{ /*deve adattarsi al contenuto delle colonne destra e sinistra*/
width:850px;
height:auto !important;
height:242px;
min-height:242px;
margin-top:17px;
padding:20px 44px;
/*float:left;*/
}

#sinistra, #destra{
width:400px;
height:auto !important;
height:242px;
min-height:242px;
margin-right:30px;
float:left;
}

#destra{margin-right:0;}

#footer{
position: absolute;
bottom:0;
width:850px;
background-color: #4d4c4a;
color: #fff;
padding:7px 44px;
}


e la pagina è questa
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="flash"></div>
<div id="content">
<div id="sinistra">
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare. Il laoyout monolitico si compone di quattro sezioni fondamentali:</p>
</div>
<div id="destra"></div>

</div>
<div id="footer">
Privacy


Copyright &copy; 2009</p></div>
</div>

[perseogiugno75]

prova ad inserire un div vuoto dopo il tuo div "destra".
A questo nuovo div vuoto attribuscigli una classe che chiamiamo "clearit" quindi

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="flash"></div>
<div id="content">
<div id="sinistra">
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
<h2>Layout monolitico</h2>


Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare. Il laoyout monolitico si compone di quattro sezioni fondamentali:</p>
</div>
<div id="destra"></div>
<div class="clearit"></div>

</div>
<div id="footer">
[url="privacy.php"]Privacy[/url]


Copyright © 2009</p></div>
</div> 

questo il CSS per il nostro div vuoto.

.clearit{
visibility: hidden;
clear: both;
} 

così dovrebbe andare...fammi sapere

[fairydesign]

Ciao!
inserendo il div .clearit con proprietà hidden però questo mi va a nascondere il contenuto del div #sinistra quando va a toccare il footer,
ma se aggiungo un'altezza ipotetica sembrerebbe funzionare!!!

.clearit{
visibility: hidden;
clear: both;
height:80px;
}


Grazie 1000! Mi hai risolto un bel problema!!!
Buon anno!!!

[fairydesign]

Ho notato però un bug su explorer 7 (ma sul 6 funziona!!!) il footer non tocca la finestra in basso del browser ma lascia 3/5 pixel di spazio.

Come posso fare per eliminarli???