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.