Ciao a tutti!
Magari la domanda è banale, ma io mi ci sono persa...
...quindi grazie mille in anticipo a chi mi darà qualche consiglio!
Ho creato una pagina che contiene 3 box centrati larghi 800 pixel e alti 600px che mi fanno da contenitori per tutti i contenuti del sito. I box sono 3 delle stesse dimensioni, xchè mi serve disporre diverse parti di una immagine di sfondo: uno contiene una img che resta in alto, uno una img che resta in basso e l'altro contiene un bg che resti dietro a tutto. Questi box hanno position:relative.
All'interno di questo "guscio" ho poi messo due box con float:left che costituicono le due colonne del mio sito.
Adesso però mi succede che con explorer vedo la pagina come la vorrei mentre con firefox se le due colonne flottanti hanno contenuti più alti di 600px, queste colonne escono dai contenitori in altezza, quindi lo sfondo arriva sempre e comunque ad una altezza di 600 px e il testo se ne esce sullo sfondo bianco.
Ho fatto diversi tentativi, modificando le altezze e mettendole a 100% oppure cambiando altri parametri, ma mi sa che ho proprio delle lacune nella mia comprensione dei posizionamenti css...
Aiuto!
Ecco il codice css:
#contenitore1 {
width: 800px;
height: 600px;
position:relative;
padding:0;
margin: auto;
background: transparent url(img/bg.jpg);
}
#contenitore2 {
width: auto;
height: 600px;
position:relative;
padding:0;
margin: auto;
background: transparent url(img/sotto.jpg) bottom no-repeat;
}
#contenitore3 {
width: auto;
height: 600px;
position:relative;
padding:0;
margin: auto;
background: transparent url(img/sopra.jpg) top no-repeat;
}
#colonna_sx {
width: 168px;
float: left;
padding:150px 15px 35px 40px;
margin:0;
background: transparent;
}
#colona_dx {
width: auto;
float:left;
padding:150px 30px 35px 15px;
margin: 0;
background: transparent;
}
Rispondi quotando
