Problème <div> et float !

**MeHo_** · 04/03/2010, 16h57

Bonjour,

Je débute en css et je souhaiterai utiliser des balises DIV et les mettre les unes en dessous des autres dynamiquement, j'ai essayer avec l'attribut float. Mais cela ne fonctionne pas elles s'ajoutent les unes après les autres, quelqu'un pourrait m'aider afin de rectifier mon erreur ?

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
	<head>
		<style type="text/css">
			.miss
			{
				float: left;
			}
			.resu
			{
				margin-left:20px;
				float: left;
			}
			.compet
			{
				float: left;
				margin-left:40px;
			}
		</style>
		<script type="text/javascript" src="../javascript/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			function addmission()
			{
				$("#fm").append('<div class="miss" id="mission"><input type="text" name="mission[]" value="" id="input_mission" /></div>');
				$("input[id=input_mission]:last").focus();
			}
 
			function addresultat()
			{
				$("#fm").append('<div class="resu" id="resultat"><input type="text" name="resultat[]" value="" id="input_resultat" /></div>');
				$("input[id=input_resultat]:last").focus();
			}
 
			function addcompetence()
			{
				$("#fm").append('<div class="compet" id="competence"><input type="text" name="competence[]" value="" id="input_competence" /></div>');
				$("input[id=input_competence]:last").focus();
			}
 
			function rmmission()
			{
				$("div[id=mission]:last").remove();
			}
 
			function rmresultat()
			{
				$("div[id=resultat]:last").remove();
			}
 
			function rmcompetence()
			{
				$("div[id=competence]:last").remove();
			}
		</script>
	</head>
	<body>
		<form>
			ajouter Mission : <img src="../images/plus.gif" alt="" onclick="addmission();" />&nbsp;&nbsp;<img src="../images/moins.gif" alt="" onclick="rmmission();" /><br />
			ajouter Résultat : <img src="../images/plus.gif" alt="" onclick="addresultat();" />&nbsp;&nbsp;<img src="../images/moins.gif" alt="" onclick="rmresultat();" /><br />
			ajouter Compétence : <img src="../images/plus.gif" alt="" onclick="addcompetence();" />&nbsp;&nbsp;<img src="../images/moins.gif" alt="" onclick="rmcompetence();" /><br />
			<div id="fm"></div>
		</form>
	</body>
</html>

Cordialement

**blueice** · 05/03/2010, 09h37

float fait tout le contraire, la position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur.