Aligner le contenu d'une colonne à un autre

1 pièce(s) jointe(s)

Salut à tou(te)s, gros débutant ici,

Je cherche un moyen d'aligner des éléments (texte, éventu image, etc) selon le contenu d'une autre colonne. Vous comprendrez mieux avec cette illustration :

Pièce jointe 139593
https://www.dropbox.com/s/urhs2jindagyfi3/blabla.png

Je n'ai aucune idée de par où commencer pour ça.. Une idée ? merci ! :)

(Ps: je voudrais éviter de bricoler avec des tableaux et cellules.. plutôt quelque chose de plus "fluide")

A mon avis, à part récupérer la position de tes éléments en Javascript puis d'affecter une marge haute à tes deux autres éléments, je vois pas ..

On pourrait imaginer quelque chose du genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style>
        body {
                font 85% Arial,sans-serif;
        }
        #page {
                width:60em;
                max-width:100%;
                margin:0 auto;
                position:relative;              
        }
        #content {
                margin:0 20%;
                padding:1em 2%;
                border:1px solid black;
                line-height:1.25em;
                text-align:justify;
        }
        figure {
                display:inline;
                margin:0;
                padding:0;
        }
        figcaption {
                position:absolute;
                width:18%;
                right:0;
                margin:-1.25em 0 0 0;padding:0;                 
        }
        .colgauche figcaption {
                left:0;
        }
        mark {
                background:none;        
        }
        .colgauche mark {
                border:1px solid red;
        }
        .coldroite mark {
                border-bottom:1px solid green;
        }               
        </style>
</head>
<body>
	<div id="page">
	<div id="content">
		Lorem <figure class="coldroite"><mark>ipsum</mark><figcaption>ce texte apparaît dans la colonne de droite</figcaption></figure> dolor sit <figure class="colgauche"><mark>amet</mark><figcaption>ce texte apparaît dans la colonne de gauche</figcaption></figure>, consectetur adipiscing elit.
		In ornare scelerisque leo at viverra.<br>
		Sed id orci a orci aliquam mollis.<br>
		Ut scelerisque ipsum eros, a luctus dolor tempor eget. Sed accumsan, tellus vel sollicitudin gravida, nulla est <figure class="coldroite"><mark>vestibulum</mark><figcaption>ce texte apparaît dans la colonne de droite</figcaption></figure> urna, id semper felis nulla eu nisi. Aliquam erat volutpat. Quisque nec consectetur lectus, at elementum tortor. Cras pulvinar metus nibh, ac sagittis tellus condimentum vel.<br>
		Pellentesque volutpat magna egestas tempor dapibus.
		Nam accumsan lacinia turpis, ut <figure class="colgauche"><mark>fringilla massa</mark><figcaption>ce texte apparaît dans la colonne de gauche</figcaption></figure>. Duis rutrum leo eu nunc sollicitudin imperdiet. Suspendisse placerat eros massa, ac suscipit quam tincidunt at. Praesent metus leo, egestas in arcu non, <figure class="coldroite"><mark>elementum placerat</mark><figcaption>ce texte apparaît dans la colonne de droite</figcaption></figure> libero. Mauris eros elit, mattis in vestibulum in, faucibus ut diam. Sed in pretium eros. Pellentesque rutrum porttitor augue porttitor <figure class="colgauche"><mark>malesuada</mark><figcaption>ce texte apparaît dans la colonne de gauche</figcaption></figure>. Duis sed sagittis erat.</div>
	</div>	
</body>
</html>

Cependant il y a plusieurs problèmes: un chevauchement possible dans les "colonnes", un alignement sur la dernière ligne si le libellé est sur 2 lignes (on pourrait imaginer placer le contenu des colonnes avant dans le html pour le prévenir mais il faudrait gérer le cas en début de ligne),...

Après c'est bof pour le référencement, le texte est entrecoupé d'autres morceaux de texte.

Clair, après, tout dépend du contexte. Blabla n'est pas très représentatif ;)