Salve a tutti. Avrei bisogno ancora una volta del vostro aiuto:
ho una pagina del mio sito impostata con un classico layout a due colonne: c'è un container (largo 760px), c'è un #header, c'è la colonna #navigation (impostata a sinistra con float: left), un div#content ed un #footer.
Tralasciando il container, l'header ed il footer, vorrei concentrarmi sulla #navigation e sul #content.
Questo è il codice css dei due:
All'interno del #content ci sono due div affiancati (div#articolo e div#linkcorrelati), dove #linkcorrelati è ad altezza variabile ma comunque sempre meno alto rispetto al div#articolo anch'esso ad altezza variabile, ed uno che sta sotto a questi ultimi due (div#banner, che vorrei centrato nel div#content). Il loro codice è il seguente:codice:div#navigation { float: left; width: 150px; margin: 10px 0; } div#content { margin-top: 15px; margin-left: 150px; }
La cosa strana che accade è la seguente: in IE6 ed IE7 tutto funziona bene: all'interno del #content ci sono i due div affiancati (#articolo e #linkcorrelati) e sotto di loro, centrato rispetto al div #content, c'è il div#banner. L'anomalia nasce in Mozilla Firefox: il div#banner mi viene posizionato centrato orizzontalmente nel div#content ma sovrapposto al div#articolo appena sotto rispetto a div#linkcorrelati. Praticamente è come se per Mozilla l'altezza del div#content è data solamente da quella del #linkcorrelati e quindi quando va a posizionare il div#banner, non va a considerare quella del div#articolo.codice:div#articolo { padding: 0 20px; width: 370px; margin-bottom: 20px; float: left; } div#linkcorrelati { width: 160px; margin-left: 410px; } div#banner { padding: 15px 20px 10px 15px; height: 125px; font-size: 11px; text-align: center; width: 375px; margin: 10px auto; }
Il codice html è scritto bene:
Vorrei tanto far capire a Mozilla che l'altezza del #content è data dall'#articolo, per cui il div#banner me lo deve andare a posizionare al di sotto di esso!!codice:<div id="content"> <div id="articolo"> <h1>Qui il titolo dell'articolo</h1> Qui il testo dell'articolo</p> </div> <div id="linkcorrelati">Qui i link correlati</div> <div id="banner"></div> </div>
Mi potete aiutare, per favore? Grazie mille!!

Rispondi quotando