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

Publié le 20 février 2006 à 13h57 Publié sous Développement

Mots clés webdesign, css, web, standards, xhtml

Si cet article vous a plu, suivez-moi sur Twitter

2 commentaires sur Layout en 4 colonnes flottantes sans tableaux »

Par soucoupe le 22 février 2006 à 08h37 :

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?
Par Xavier le 22 février 2006 à 10h36 :

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