Mise en forme rapide sous la forme de colonne avec du CSS

J’utilise depuis maintenant quelques temps une mise en forme très simple qui me permet de faire des mises en page sous la forme d’une grille avec un tout petit bout de code CSS qui certe a des limites mais rend de fier services. Ce bout de code s’appelle Malo.

Sur le principe vous faites une div à 100% puis pour avoir deux colonnes vous faites deux div avec la class 50%. Voici un exemple :

Contenu à gauche
Contenu à droite

Et le code CSS à mettre dans votre feuille de style :

.dp50,.dp100{float:left;display:inline;*margin-left:-0.04em;margin-bottom:0.5em;}
.dp50{width:50%;}
.dp100{width:100%;}

Bien entendu cela marche avec tout ce que vous définissez : 33%, 70% la seule contrainte il faut que vous retombiez sur 100% à la fin… Encore une fois c’est un peu de la bricole mais cela marche bien. La nouvelle version de 2803 media a été construit comme cela, visible ici : http://www.2803media.fr/

Articles en rapport :

3 Comments

  • 1
    Quentin
    September 2, 2010 - 10:35 am | Permalink

    Quel génie ! 😉

  • 2
    Marc
    October 3, 2010 - 2:43 am | Permalink

    Bonjour,

    Quel plugin WP avez vous utilisé dans le site http://www.2803media.fr pour animer la page lorsque l’on clique sur les liens ?

    Merci

  • 3
    October 3, 2010 - 7:25 pm | Permalink

    En fait cela n’est pas un plugin mais du javascript avec une ancre dans le lien. Cf le code source de la page!