Ho seguito la guida base di Html.it per realizzare un sito con layout in css, e volevo quindi posizionare il mio footer sempre a fondo pagina, come spiegato nella guida. Ho seguito passo passo le istruzioni, e sono arrivato a un buon punto, ma adesso sono proprio bloccato! Infatti il layout funziona sia con IE che con Firefox, ma con Safari e Google Chrome per niente. La cosa che mi stupisce, però, è che se guardo l'esempio della guida con Safari, il mio browser default, l'esempio funziona perfettamente, è solo la mia versione che con Safari (e Chrome) non funziona.
Ho controllato decine di volte, ma proprio non ne riesco a venire a capo, voi avete idee?
Questo è il mio foglio di stile, a me sembra tutto in ordine, ma evidentemente mi sfugge qualcosa...html,body{margin: 0; padding: 0;height: 100%}
div#container {
position: relative;
width: auto;
height: 100%;
margin : 0 auto;
border-top : 3px solid #000537;
border-right : 3px solid #000537;
border-left : 3px solid #000537;
padding : 0px;
}
body>div#container{height: auto; min-height: 100%}
div#header {
background-color: white;
margin : 0px;
border : 0px;
padding : 10px;
height : 100px;
}
div.strisciacentrale {
background: #000537;
height : 330px;
margin : 0px;
border : 0px;
padding : 0px;
}
div#navigation {
background: #bc1e2d;
margin : 0px;
border : 0px;
padding : 0px;
height : 35px;
}
div#content {
background: white;
position: relative;
bottom: 0;
height: auto;
margin : 0px 0px 35px 0px;
border-left : 2px solid #bc1e2d;
border-right : 2px solid #bc1e2d;
border-bottom : 2px solid #bc1e2d;
padding: 0 1.5em 5em;
}
div#footer {
background-color: #000537;
position: absolute;
bottom: 0;
width: 100%;
height: 23px;
padding: 0.5em 0;
text-align: center;
}
In aggiunta volevo provare a fare in modo che il div content fosse sempre adiacente al footer, infatti gli ho assegnato un bordo inferiore e mi piacerebbe che questo combaciasse sempre con il footer. Su questo punto ho provato ad improvvisare io assegnando al div content position relative e bottom: 0, ed height: 100%, ma non ha funzionato purtroppo...
Mah, proprio non capisco!
Grazie mille dell'aiuto, spero possiate dirmi dove sbaglio!

Rispondi quotando