Layout en 4 colonnes flottantes sans tableaux

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

À propos

Je m'appelle Frédéric de Villamil, et quand je ne déploie pas ma mauvaise humeur et ma mauvaise foi sur le Web, je suis un super héros chargé de sauver le monde. Vous pouvez me suivre sur Twitter.

À lire également

Si Layout en 4 colonnes flottantes sans tableaux vous a intéressé, vous pouvez poursuivre votre lecture avec ces billets similaires :

Sous-titrer les vidéos les rendent-elles vraiment plus accessibles ?

Layout en 4 colonnes flottantes sans tableaux

Petits travaux de rentrée

Un peu de Quechup dans votre jambon épicé ?

2 commentaires sur Layout en 4 colonnes flottantes sans tableaux »

Trackbacks sur Layout en 4 colonnes flottantes sans tableaux

Les trackbacks sont fermés pour cause de spam.