Auteur, compositeur de code web, je suis de prêt ou de loin l'univers des codeurs Internet, dits les puristes
(par certains...), tels les mouvements OpenWeb Group, PoMPaGe(.net) ; je me suis voué à la cause il y a un an environ (vraiment gros maximum...) !
J'ai le plaisir de vous annoncer que le multicolonnage en CSS est Possible !!!
Je l'ai fait : (voir mon site de développement où réside mes projets en attente... de fin 
)
En fait, c'est l'explication des "listes de définitions" sur pompage.net qui m'en a donné inconsciemment l'idée du positionning !
Comme à mon habitude, j'ai plus ou moins survolé l'article sans chercher à voir le code usé...
Mais, ce sont les présentations - les rendus graphiques - qui m'ont travaillées, et surtout la Styler une liste de définitions pour en faire une galerie d'images qui m'a fait me questionner, me faisant dire que si on pouvait appliquer côté à côte des <dl>, on devait pouvoir arriver à publier du contenu web, de façon journalistique par colonnages, autrement dit par multi-colonnages !
Dans un premier temps, j'ai créé chacune de mes colonnes, dans l'exemple montré : 4 !, rien qu'à partir des listes de définitions, sachant le but pour lequel je voulais l'appliquer : mon cv ... du moins, prouver par A + B qu'user du positionning CSS "trituré" pouvait rimer avec interface graphique correct, voire très correct !
Je ne suis pas un graphiste, il me manque fortement la technique. Mais, j'ai rêvé (croyez-le ou non, c'est pourtant vrai, c'est ainsi que je fonctionne bien souvent...) l'interface rendue telle que vous la voyez ... aucune concession à mon rêve ! C'était MA condition sine qua none !!!
Bref, revenons au code :
en voulant gèrer mes 4 colonnes de publications, vu les autres élémènts positionnés, la colonne de gauche extérieure se positionnait plus haut. J'ai donc usé, en amont et en aval, de l'élèment <hr> qui sont les fameuses "règles" du code (x)html... partant du principe intuitif que les colonnes seraient obligés de se caler à partir du premier élèment <hr>, et forcerait tout autre élèment à partir du second et dernier élèment <hr> utilisé pour cadrer mes colonnes.
Mais, cela n'a pas résolu mon problème de positionnement gauche-droite des colonnes les unes en rapport avec les autres... loin de là , cela ne faisait que donner un "cadre".
D'autant que malgré avoir donné une taille width: 24 %; et du float adéquat, j'y appliquais des marges :
float: left; margin: 0% 75% 0% 0%; pour la première,float: right; margin: 0% 50% 0% 25%; pour la seconde,float: left; margin: 0% 25% 0% 50%; pour la troisième,float: right; margin: 0% 0% 0% 75%; pour la dernière.
Et, c'était là mon erreur ... le positionnement ne voulait pas s'effectuer ... mais, j'ai compris après en quoi !
Reprenant ma première leçon pour retrouver les box lessons qui avaient influencé mes débuts en CSS (OpenWeb Group est né - officiellement - un, deux mois après mes débuts...) où le positionnement était déclaré par des width et autres margin appropriés. Par dépit, je supprime mes propres déclarations de marge pour chacune des colonnes, ... et rafraîchit mon browser mozilla : et, là, merveille, les 4 colonnes qui se positionnent les unes par rapport aux autres !!!
Ce que j'avais fait pour me remettre les idées au clair, m'avait donné la solution... finale.
Il ne restait plus qu'à bien remettre au bon emplacement désiré chacune des colonnes, et le tour était joué. En effet, avec les déclarations flottantes, telles qu'appliquées précédemment, la colonne 2 était à la position de la 4, la colonne 3 à celle de la 2 et, la 4 en troisième position.
C'est là que j'ai eu l'autre idée, que j'ai trouvé faramineuse : un float: left; sur les trois premières définitions CSS des listes de définitions, et un float: right; sur la dernière ! J'avais rempli mon objectif...
Pour passer au suivant et, si j'implémente je veux dans une colone du texte encadré par les balises de paragraphe <p>, sachant que le problème de positionnement m'est paru évident à chaque déclaration de bloc <p> ; j'ai résolu trés rapidement le problème posé en entourant chacune de mes colonnes virtuelles d'un bloc conteneur <div> auquel je donnais l'identifiant et les déclarations CSS adhoc, précédemment fournies aux listes de définitions...
Pour terminer par entourer le tout d'un bloc <div> ayant pour taille 100%, par mesure de sécurité !
Voici le rendu du code XHTML (valide 1.0) :
<hr />
<div id="texte">
<div id="text1">
<h2>Savoir-faire</h2>
<dl>
<dt>Administration Réseaux,<br /> Système :</dt>
<dd><strong>GNU/Linux</strong></dd>
<dd><strong>Windows NT/2K(3)</strong></dd>
<dd> Administration Système</dd>
<dd> (Pratique SHELL en mode console),</dd>
<dd> Administration Réseaux</dd>
<dd> (Serveurs HTTP Apache, DNS Bind, FTP ProFTP, ...),</dd>
</dl>
<dl>
<dt>Webmaestria :</dt>
<dd> Développement Web <em>[(x)HTML, CSS & PHP...]</em></dd>
</dl>
<dl>
<dt>Assistance :</dt>
<dd> Installation & Dépannage de Matériaux x86-PC,</dd>
<dd> Assistance logiciels & utilisateurs,</dd>
<dd> </dd>
<dd>+ Utilisation de logiciels bureautique...</dd>
</dl>
</div>
<div id="text2">
<h2>Professions</h2>
<dl>
<dt>2001 \ 2004</dt>
<dd>~ Techn. Informatique-Réseaux ~<dd>
<dd>~ Développeur Web ~</dd>
<dd><em>C.D.F.A.A. 47 - Ste Livrade s/Lot</em></dd>
<dt>1998 \ 2000</dt>
<dd>~ Agent d'Accueil ~</dd>
<dd><em>Ass. A.S.S.A.D. - AGEN</em></dd>
<dt>1996 \ 1998</dt>
<dd>~ Gestionnaire de pompes ~</dd>
<dd><em>Station SHELL - Villeneuve s/Lot</em></dd>
<dt>1996 \ 1997</dt>
<dd>~ Agent Entretien Qualifié ~</dd>
<dd><em>S.I.T.S. Du Villeneuvois - Villeneuve s/Lot</em></dd>
<dt>1995 \ 1996</dt>
<dd>~ Secrétaire ~</dd>
<dd><em>Ass. « Terre d'Espoir » - Villeneuve s/Lot</em></dd>
<dt>Autres :</dt>
<dd><strong>~ Représentation ~</strong></dd>
<dd>@ - AMWAY</dd>
<dd>@ - Contrôle-Sécurité-Gaz</dd>
</dl>
</div>
<div id="text3">
<h2>Formations</h2>
<dl>
<dt>1995</dt>
<dd>FORMATION PSYCHO-VENTE 'Agents Commerciaux & Représentants'</dd>
<dd><em>École SUD-MANAGEMENT (...)</em></dd>
<dt>1990</dt>
<dd>B.E.P. Monteur-Dépanneur Froid & Climatisation</dd>
<dd><em>Porto-Vecchio : Corse : France</em></dd>
<dt> </dt>
<dd> Attestation de Formation aux Premiers Secours.</dd>
</dl>
</div>
<div id="text4">
<h2>Intérêts</h2>
<p># Bilingue, hispanophone (...)</p>
<p># Traducteur, relecteur (...)</p>
<p># Modérateur du site (...)</p>
<p># Auteur écrivain - Ecrits.net -<br />(...)</p>
<p># Auteur d'une interface web graphique (...).</p>
<p># Lecture de Revues (...)</p>
<p># Passionné de Cinéma, de Dessins Animés.</p>
<p># Adhérent (...)</p>
</div>
</div>
<hr />
puis CSS (valide 3) :
hr {
clear: both;
visibility: hidden;
}
#texte, #text1, #text2, #text3, #text4
{
margin: 0;
padding: 0;
}
#texte {
width: 100%;
margin-left: 1em;
}
#text1, #text2, #text3, #text4 {
background: transparent;
margin: 80px .3em 0 0;
width: 24%;
}
#text1, #text2, #text3 {
float: left;
}
#text4 {
float: left;
}
#text1 h2, #text2 h2, #text3 h2, #text4 h2 {
border-bottom: .1em solid #900;
margin-bottom: .5em;
text-align: center;
font-size: .9em;
letter-spacing: .3em;
color: #333;
}
#text1 dt, #text1 dd,
#text2 dt, #text2 dd,
#text3 dt, #text3 dd,
#text4 dt, #text4 dd
{
font-size: .8em;
color: #666;
}
#text1 dt, #text2 dt, #text3 dt, #text4 dt {
margin: .3em 0 .3em .5em;
letter-spacing: .1em;
font-weight: bold;
}
#text1 dd, #text2 dd, #text3 dd, #text4 dd {
margin-right: .3em;
}
#text4 p {
padding-left: .3em;
list-style-type: none;
font-size: .8em;
color: #666;
}
Le Résultat
P.S. : Pour la petite histoire, je l'ai annoncé sur la liste de pompages voulant partager ma joie, mais je ne sais pourquoi, je n'ai eu aucun retour... rien ! Comme si ca n'intéressait personne ! étonnant...
:( 