Je viens de terminer un layout en 4 colonnes flottant que je vais utiliser pour refaire mon thème Identification Band Quadruplet. Contrairement à la première version, il prend toute la place sur l’écran et s’adapte aux changements de résolution. L’idéal dans un second temps est de prévoir un javascript qui le repassera en 3 colonnes si jamais la largeur de la fenêtre devient inférieure à 850 pixels. J’en reparlerai un peu plus tard quand ce sera implémenté.

Je donne ici le markup XHTML et CSS à titre d’exemple.

    body {  
        padding: 0 20px 0 20px;
        margin: 0;
        font: small Verdana, sans-serif;
        text-align: center;
    }

    #page { 
        margin: 0 auto;
        text-align: left;
        display: inline;
    }

    #leftleft {
        width: 25%;
        display: inline;
        float: left;
    }

        #leftright {
                width: 25%;
                display: inline;
                float: left;
        }

        #rightleft {
                width: 25%;
                display: inline;
                float: left;
        }

        #rightright {
                width: 25%;
                display: inline;
                float: left;
        }

    .inside {
        text-align: justify;
        padding: 20px 20px 0 0;
    }
        
    .rightest {
        text-align: justify;
        padding-top: 20px;
    }


<div id="page">
    <div id="leftleft">
        <div class="inside">
            <h3>Left Left</h3>
            ...
        </div>
    </div>
    <div id="leftright">
        <div class="inside">
        <h3>Left Right</h3>
        ...
    </div>
    <div id="rightleft">
        <div class="inside">
        <h3>Right left</h3>
        ...
    </div>
    <div id="rightright">
        <div class="rightest">
        <h3>Right right</h3>
        ...
    </div>
</div>

Il fonctionne actuellement sous :

  • Mac OS X:
    • Firefox 1.0.7
    • Netscape 7.2
    • Opera 7.5.4u1
    • Firefox 1.5.0
    • Mozilla 1.6
    • Mozilla 1.7.12
    • Opera 8.5.0
    • Safari 1.2
    • Safari 1.3
    • Safari 2.0
  • Linux:
    • Firefox 1.0.7
    • Firefox 1.5.0
    • Opera 8.5.0
    • Konqueror 3.4.0-5
    • Mozilla 1.7.12
  • Windows:
    • AOL 9.0
    • IE 4.0
    • IE 5.0
    • IE 5.5
    • IE 6.0
    • IE 7.0b2
    • Mozilla 1.6
    • Mozilla 1.7.12
    • Netscape 4.78
    • Netscape 6.2
    • Netscape 7.2
    • Firefox 1.0.7
    • Firefox 1.5.0
    • Opera 7.23
    • Opera 7.54u2
    • Opera 8.5

NE MARCHE PAS SOUS:

  • Mac OS X:
    • IE 5.2
Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: