mettre verticalement plusieurs div

**laurentSc** · 02/11/2012, 20h57

Bonsoir,

je n'arrive pas à faire ce qui est dans le titre :

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
25
26
27
28
29
  <style>
#div_noms {
float:left;
}
#div_imgs {
margin-left:100px;
float:left;
}
  </style>
<div>
<span style="font-weight: bold; text-decoration: underline;">Repr&eacute;sentants
pour l'ECOLE ELEMENTAIRE DU VILLAGE :
<br>
</span><br>
<div id="div_noms">
<table>
---
</table>
</div>
<div id="div_imgs">
<table>
  ---
</table>
</div>
</div>
<div><span
 style="font-weight: bold; text-decoration: underline;">Repr&eacute;sentants
pour l'ECOLE MATERNELLE :
</span></div>

alors que je croyais que par défaut les div sont à la vertical.

**Muchos** · 03/11/2012, 03h15

J'ai eu du mal à comprendre votre problème.
J'imagine que vous parlez de la dernière div, qui se trouve alignée horizontalement avec div#div_imgs (en effet, puisque cette div flotte, elle vient se placer à sa suite).

Si c'est ça, il faut appliquer la propriété clear à la dernière div. Ex :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

div.clear {clear: left;}

**laurentSc** · 03/11/2012, 12h28

J'avoue que l'expression de mon besoin n'était pas très claire, mais ce n'est pas ça, et comme entre temps, j'ai un peu cherché, je mets ici l'état actuel du code, sachant que le besoin, c'est de mettre la div2 sous la div1, et voici pour l'instant ce que ça donne : http://parentdelevelansv.free.fr/mem...ese/index1.php (il faut survoler la liste des noms sur la gauche, juste à droite du menu, pour voir le problème) :

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
38
39
40
41
42
43
44
45
 
<div id="div1">
        <span style="font-weight: bold; text-decoration: underline;"><font
 face="Arial">Repr&eacute;sentants
pour l'ECOLE ELEMENTAIRE DU VILLAGE :
<br></font></span><font face="Arial"><br></font>
         <div id="div_noms">
                     <table>
                             <tbody>
                                  <tr>
                                        <td><a  href="---.png" onmouseover="see_img('---');"  onmouseout="kill_img('---')">texte</a>
                                       </td>
                                 </tr>
...
                              </tbody>
                    </table>
          </div>
          <div id="div_imgs">
                    <table>
                           <tbody>
                                 <tr>
                                    <td><img src="---.png" id="---" style="display: none;"></td>
                                 </tr>
                                 ...
                   </table>
         </div>
</div>
                                          <br>
                                          <br>
<div  style="clear:left;"></div>
<div id="div2" style="clear:left;"><font face="Arial">
POUR CONTACTER L'APE, envoyez un mail &agrave; <a
 href="mailto:---@gmail.com">---@gmail.com</a>
ou
d&eacute;posez un courrier sous enveloppe dans la bo&icirc;te
aux lettres de la
Passerelle indiquant &laquo;&agrave;
l'attention de
l'APE &raquo;<br>
<br>
<br>
<br>
<br>
<br>
</font></div>

**Eric2a** · 03/11/2012, 12h54

Salut,

L'élement permettant d'annuler le flottement doit se trouver après le dernier élement flottant.

Exemple simplifié

Code xhtml :

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
38
39
<!DOCTYPE html>
<html lang="fr-FR">
	<head>
		<meta charset="UTF-8" />
		<title>Test</title>
 
		<style type="text/css">
                        #div_noms{
                                float:left
                        }
                        #div_imgs{
                                margin-left:500px;
                                float:left
                        }
                        .description{
                                font-weight:bold;display:block;margin:1em 0
                        }
                        
                        div.clear{clear:left}
                </style>
	</head>
 
	<body>
		<!-- DIV #1 -->
		<div>
			<span class="description">Description #1</span>
 
			<div id="div_noms">Gauche</div>
			<div id="div_imgs">Droite</div>
 
			<div class="clear"></div> <!-- "Annuler" le flottement à gauche -->
		</div>
 
		<!-- DIV #2 -->
		<div>
			<span class="description">Description #2</span>
		</div>
	</body>
</html>

**Muchos** · 03/11/2012, 15h20

@Eric2a: oui, mais le rajout d'une div n'était pas nécessaire. clear:left sur la dernière div, ça fonctionne.

@laurentSc: sérieusement, expliquez mieux >< Qu'est-ce que c'est div1 et div2 ?! [EDIT: désolé ! J'avais pas vu

]

**laurentSc** · 03/11/2012, 16h13

Qu'est-ce que c'est div1 et div2 ?!

Je croyais que c'était suffisamment explicite : les div d'identifiant div1 et div2.

L'élement permettant d'annuler le flottement doit se trouver après le dernier élement flottant.

J'ai tenté de faire ça (pour assurer, j'ai mis une div ( <div style="clear:left;"></div>)) à la fin mais ça continue de flotter : http://parentdelevelansv.free.fr/mem...ese/index1.php

mettre verticalement plusieurs div

CSS

Vue hybride

Discussions similaires

Partager

Partager