BigThink

CSS trick: div affiancati su FireFox

Tutti quei programmatori o designer che sono soliti sviluppare layout tableless per i loro siti sanno bene come sia complicato — e a volte anche frustrante — creare una grafica che sia crossbrowser, perfettamente compatibile con tutti i maggiori browser in circolazione.

Spesso ciò che funziona bene con un browser, si vede in modo completamente diverso in un altro. Due nomi a caso? Internet Explorer e FireFox, ovviamente.

Oggi vi propongo la soluzione a un problema che mi ha fatto prendere a capocciate il muro per mesi: inserire due o più div, affiancati con la proprietà float:left, dentro un div contenitore che includa e riquadri entrambi.
Che problema c’è, direte voi. Nessuno, se siamo su Internet Explorer. Molti se lo guardiamo su FireFox.

Consideriamo la seguente struttura html:

1
2
3
4
<div id="container">
    <div id="left">Sinistra</div>
    <div id="right">Destra</div>
</div>

E applichiamo gli stili ai div, impaginandoli e colorandoli in modo da evidenziarli:

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#container{
    width:400px;
    background-color:black;
    padding:20px;
}

#left, #right{
    float:left;
    width:200px;
    height:200px;
}

#left{
    background-color:red;
}

#right{
    background-color:yellow;
}

Su IE otteniamo ciò che volevamo:

Tuttavia su FireFox il risultato non è proprio quello che ci aspettiamo:

La soluzione è semplicissima se conoscete la proprietà overflow:hidden, altrimenti il problema è insormontabile. Aggiungiamo questa proprietà al selettore del container ed il gioco è fatto:

5
6
7
8
9
10
#container{
    width:400px;
    background-color:black;
    padding:20px;
    overflow:hidden;
}

La compatibilità è salva su tutti i browser.

Spero che questo trucchetto possa essere utile anche a voi quanto lo è stato a me. Ormai mi è indispensabile!

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Uno script jQuery per risolvere i problemi del Box Model

Uno script jQuery per risolvere i problemi del Box Model

Uno dei principali problemi di compatibilità tra browser è l'interpretazione del cosiddetto box model. Secondo gli standard dell W3C, la larghezza (width) o l'altezza (height) assegnata ad un box si riferisce solo all'area di contenuto del box. Il padding, i bordi ed i margini vengono sommati in un secondo momento per arrivare alla larghezza ...
Centrare un div dentro un altro div

Centrare un div dentro un altro div

Visto che — statistiche alla mano — i miei post sui CSS sembrano essere apprezzati, continuo su questa strada. Vediamo oggi come centrare gli elementi delle nostre pagine, in particolare i div. Com'è noto, per centrare un testo rispetto al suo contenitore, è sufficiente un semplice text-align:center. Cosa che non funziona con i div. Bisogna infatti ...
PNG trasparenti su IE6

PNG trasparenti su IE6

Ormai si sa, il browser che peggio supporta gli standard è sempre lui, Internet Explorer. Ancora ancora la versione 7, ma la 6 è davvero scandalosa. Oltre ai vari problemi legati alla visualizzazione dei CSS e via dicendo, è noto il bug delle PNG trasparenti. IE6 si rifiuta semplicemente di mostrarci la trasparenza, sostituendola ...
CSS trick: div contenitore in full-height

CSS trick: div contenitore in full-height

Spesso abbiamo la necessità che il div contenitore del nostro sito si estenda per tutta l'altezza della pagina web, anche se il contenuto è minimo. Come fare? Per questo esempio, è sufficiente il solo div "container" con del testo: <div id="container"> <p>Testo</p> </div> Aggiungiamo gli stili base e coloriamo il div per visualizzarlo nel nostro esempio: #container{ height:100%; background:red; } Tuttavia non basta ...

10 Commenti

  1. Ricambi Fiat 500

    Grazie, anch’io stavo buttando giù un muro a forza di testate! Con le tabelle si stava così bene…!

    16 novembre 2010, 21:32
  2. Yuri

    Mamma mia mi hai salvato!!

    GRAZIE !!

    15 settembre 2010, 12:18
  3. Giuseppe

    Grazie grazie grazie grazie grazie era da giorni che stavo uscendo pazzo!!!!!

    25 febbraio 2009, 11:51
  4. pisu

    grazie mille mi hai salvato ;)

    19 gennaio 2009, 12:53
  5. Luca

    Veramente complimenti,
    è proprio l’istruzione che cercavo e mi stata creando un sacco di casini proprio su Firefox, Safari e Google Chrome.

    Terrò molto più in considerazione, la prossima volta, l’istruzione “overflow”.

    Grazie ancora…ottimo tip

    7 ottobre 2008, 11:24
  6. Ghido

    [Comment ID #664 Will Be Quoted Here]
    Ehe. E’ un trucco che cambia completamente il tuo modo di fare codice html, una volta che lo sai. Non so come farei senza :)

    9 settembre 2008, 14:01
  7. Emil Masutto

    Mitico!!!

    Io uso solo firefox e non capivo perchè me lo visualizzava così ;)

    9 settembre 2008, 13:51
  8. Ghido

    [Comment ID #205 Will Be Quoted Here]
    Sono contento che ti sia servito ;)

    13 maggio 2008, 10:29
  9. Ser

    Grazie anche da parte mia!

    12 maggio 2008, 23:51
  10. Ste

    Ottimo tip! Grazie mille

    11 marzo 2008, 23:13