Bordure entre deux colonnes

Petite astuce de rien du tout pour créer une bordure d’un ou plusieurs pixels entre deux colonnes.

C’est difficile à faire ?

Pas vraiment, mais ça se complique quand on souhaite que cette bordure soit toujours de la hauteur de la colonne le plus grande. Faut-il la placer sur le conteneur de gauche ou de droite ?

Solutions

On peut dans un premier temps penser à utiliser la techniques des colonnes factices et placer un background-image sous les colonnes, mais cela présente deux petits soucis :

• la largeur des colonnes sera alors fixée ;
• on fait appel à une image alors qu’un simple style CSS pourrait suffire.

Voici la méthode que j’utilise à la place :

<div style="overflow:hidden;height:1%;">
    <div style="float:left;width:200px;border-right:5px solid #000;">
        <p>
            Colonne A.
        </p>
    </div>
    <div style="float:left;width:200px;border-left:5px solid #000;margin-left:-5px;display:inline;">
        <p>
            Colonne B.
        </p>
    </div>
</div>

L’astuce consiste donc à placer deux bordures et à les faire se superposer ensuite via une marge négative de la largeur de la bordure. Simple, mais efficace.