Imam vprašanje glede pozicioniranja footer-ja na dno strani. Spodnja koda je do sedaj lepo funkcionirala v vseh brskalnikih (vse projekte preverjam v IE6,7,8, Firefox 2,3+, Chrome, Opera, Safari):
HTML koda:
<div class='container'>
<div class='wrapper'>
<!-- vsebina strani -->
<div class='push'></div>
</div> <!-- wrapper -->
<div id='footer'>
<!-- vsebina footerja -->
</div>
</div>
CSS pa izgleda takole:
html, body {
height:100%;
}
.container {
margin:0 auto;
width:980px;
height:100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -16px;
background-color:#ffffff;
}
.push {
height:16px;
}
div#footer {
height:16px;
}
Sedaj imam pa primer, ko imam na levem in desnem delu container-ja okrasni rob, ki bi se moral raztegovati vse do dna strani:
div#container {
margin:0 auto;
width:980px;
/*height:100%;*/
padding-left:18px;
padding-right:18px;
background:#ffffff url(background.png) repeat-y;
}
Slike še najbolje ponazorijo situacijo:
V kolikor je "height:100%;" zakomentiran, footer ni pozicioniran na dno:

V primeru, da vrstico height odkomentiram, dobim željeni efekt:

Do težave pa pride pri daljših vsebinah, kjer je potrebno scrollati, saj na levem/desnem izgine okrasni border:

Morda kakšen namig?