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...

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 ...
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 ...
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 ...
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 ...

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