Bonjour,

J'ai lu pas mal de tutoriels et fait une recherche dans le forum, sans trouver la réponse à mon interrogation:

Je souhaite organiser plusieurs éléments d'une page en trois menus alignés.Tout se passe correctement à l'exception près que l'élément situé dans le div placé à droite se loge en bas du block et non en haut. J'ai essayé d'utiliser vertical-align:top; , sans succès.

Voilà les codes:

HTML:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="notice">
               <div class="menu-gauche">
                  <div class="champ-ISAD-cote">
                     <div class="nom-champ-ISAD">Cote : </div>8 D 3/1</div>
                  <div class="champ-ISAD-boite">
                     <div class="nom-champ-ISAD">Boîte n° : </div>1</div>
               </div>
               <div class="menu-centre">
                  <div class="champ-ISAD-intitule">
                     <span class="nom-champ-ISAD-intitule">Intitulé : </span>Recherche de sources documentaires</div>
                  <div class="champ-ISAD">
                     <div class="nom-champ-ISAD">Présentation du contenu : </div>
                     <ul>
                        <li>Fiches de références bibliographiques</li>
                        <li>Tapuscrits corrigés</li>
                        <li>Notes de recherche</li>
                     </ul>
                  </div>
               </div>
               <div class="menu-droite">
                  <div class="champ-ISAD-date">
                     <div class="nom-champ-ISAD"/>1965-[1970]</div>
               </div>
            </div>

Une partie de la CSS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
*.notice{
    white-space:normal; 
    display:block;
    padding:1%; margin:1%;
    width:100%;
}
 
*.menu-gauche{
    float:left;
	width:15%;
	border-width:1px;
 border-style:solid;
 border-color:RGB(233,78,27);
}
*.menu-centre{
    width:65%;
    float:left;
     border-style:solid;
 border-color:RGB(233,78,27);
 
}
*.menu-droite{
    width:15%;
    position:relative; left:90%;
    float:none;
         border-style:solid;
 border-color:RGB(233,78,27);
}
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}
 
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}
Le problème d'affichage se situe au niveau du menu de droite, même si tout est lié. L'élément <div class="nom-champ-ISAD"> reste en bas malgré l'utilisation de vertical-align:top; .

Quelqu'un aurait une idée de l'origine du problème?

Merci