Nije neka mudrost, zaista, malo relativnog i apsolutnog pozicioniranja i radi...
Pojednostavljeno:
Kôd:
<div id="all">
<div id="container">
<div id="content">
ovde tekst, manje-više
</div>
</div>
<div id="footer"></div>
</div>
all treba da centrira sve u sebi, footer da se prikazuje ispod containera...
Kôd:
body {
padding: 0;
margin: 0;
height: 100%;
}
* html body {
text-align: center;
}
#all {
position: relative;
margin: 0 auto;
width: 702px;
min-height: 100%;
}
* html #all {
text-align: left;
height: 100%;
}
#container {
padding: 0 0 60px;
}
#content {
margin-right: 234px;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 468px;
height: 60px;
background-color: #f00;
}
Što ovo stavljam? Pa radi, a namučio sam se jer nisam stavio 100% za visinu body elementa...
Da ne bude samo to, u potrazi za rešenjem napravio sam test-primer, na površinu je isplivalo da popularni browseri još uvek imaju svojih boljki... Dinamičko repozicioniranje elemenata - firefox je totalno pukao, opera se provlači, ie radi kao da je to najjednostavnija pojava u životu.
Primer je fajl uz poruku, preuzmite, testirajte na što više browsera, ostavite ovde svoja zapažanja... attach ima ekstenziju .txt zato što to dozvoljava ovaj saIt, treba opaliti jedan rename pre testa :-)
... samo da malo pojasnim... u primeru s desne strane siva povšina reaguje na klik, prvo piše on da se uključi tekst, pa posle piše off da se isključi tekst, pa opet piše on a ff zaboravi da vrati footer na staru poziciju, opera vrati ali zaboravi da vrati visinu stranice, ie odradi sve što treba.