Saluti a tutti,
avrei una domanda su cui sto sbattendo la testa da un pò.
L'idea è semplice, vorrei fare una pagina con header, 2 colonne e footer.
Una delle due colonne ha un "float:right" per stare a destra, larghezza fissa in pixel altezza 100%, nell'altra di sinistra vorrei metterci il div della google map esteso all 100% di larghezza e altezza.
A fondo pagina dove dovrebbe starci il footer (non in chiusura dei contenuti ma proprio in fondo facendo riferimento a quanto trovato nell'articolo su html.it dove si parla di problema del footer)
vi riporto html e CSS:
e questo è l'html:html, body{
margin: 0px;
text-align: center; /*centra in IE 5.x */
}
body>div#container{height:auto; min-height:100%}
/*** DIV ***/
div#header{height: 73px; padding:10px 30px 0px 30px}
div#container{
background: url('images/main/bg.gif');
position:relative;
height: 100%;
margin: 0 auto;
}
/* div contenuto sx*/
div#main {
margin-right:340px;
height: 100%;
}
div#map {
padding: 10px;
height:100%;
width: 100%;
}
/* menu laterale dx */
div#local{
float:right;
width:330px;
}
/* footer */
div#footer{
position: absolute;
height:34px;
bottom:0;
width: 98%;
padding: 0;
margin-left: 1%;
background: url('images/main/bottom.jpg');
clear: both;
}
e ora i problemi:<body>
<div id="container">
<div id="header">
contenuto testuale
</div>
<div id="local">MENU </div>
<div id="main">
<div id="map"></div>
</div>
<br style="clear: both" />
<div id="footer">contenuto footer</div>
</div>
</body>
</html>
se nel css, alla riga:
body>div#container{height:auto; min-height:100%}
lascio la regola height:auto;
in Firefox la mappa mi si allunga ben oltre il footer, il quale rimane "sopra" la mappa (che per altro si allunga ben più dell'altezza dello schermo).
Se lascio la regola height:auto invece il footer sta al suo posto in basso allo schermo,
il container si allunga effettivamente al 100% ma gli altri div no, e la mappa infatti mi resta ad altezza zero...
allego due esempi:
come si vede lasciando la regola height: auto
http://img120.imageshack.us/img120/936/62789952jy0.jpg
come si vede togliendo la regola height: auto
http://img505.imageshack.us/img505/2362/60246359pv7.jpg
Rispondi quotando
