Layout en 4 colonnes flottantes sans tableaux

Le 20 Feb 2006 à 13h57 | Catégorie : Publié sous | 2 commentaires

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

J’ai mis en ligne une version de démonstration.

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

Commenter »

  1. soucoupe 1 day later:

    thanx pour l’input. je développe un blog pour un ami… maintenant il faut juste trouver comment faire défiler les billets dans les colonnes… quelle est la tranche de ie5/MAC? 1%? encore moins?

  2. Xavier 1 day later:

    Prendre en compte IE5/Mac devient de plus en plus relou avec le temps…

Laisser un commentaire

Merci de vous exprimer dans un français correct. Les commentaires déplacés, injurieux et le spam seront supprimés.

Les trackbacks sont fermés pour cause de spam.