si! ho usato proprio quella aggiungendo i miei contenuti
codice HTML:
<div id="container">
<div id="content"> <!--Your content goes here-->
<div id="sinistra">SINISTRA</div>
<div id="centro">CENTRO</div>
<div id="destra">DESTRA</div>
</div>
<div id="footer">
Footer here
</div>
</div>
codice HTML:
* { margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#container {
background: red; /* styling only */
margin: 0 auto;
position: relative;
height: auto !important;
min-height: 100%;
height: 100%; width: 100%;
}
#content {
padding-bottom: 100px;
height:100%;
background: blue;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%; height: 50px;
background-color: #FAA53A;
border-top: 10px solid #F58529;
}
#header {
background-color: #FAA53A;
border-bottom: 10px solid #F58529;
height: 100px; width: 100%;
}
#sinistra {
float: left;
width: 20%;
background-color:#3CF;
height: 100%;
}
#centro {
width: 60%;
float: left;
background-color:#CF0;
height: 100%;
}
#destra {
float: left;
width: 20%;
background-color: #93A5C4;
height: 100%;
}
Come puoi vedere è proprio il content (un blu) che non si allunga, di conseguenza neanche le colonne...
Senza-titolo-1.jpg
Anche eliminando il div "content" e dando alle tre colonne "padding-bottom: 100px" il risultato non cambia molto!
Senza-titolo-3.jpg