Div contenant des élements float : comment gérer la hauteur ?

**Concombre Masqué** · 14/05/2009, 00h52

Bonjour,

sur mon site, je met un peu d'ajax par-ci par là, notamment pour les formulaires (pour éviter d'avoir à recharger toute la page).

Pour que ce soit compatible avec Internet Explorer, je dois hélas me passer de <table> là où il devrait y en avoir. De mon formulaire qui contient plusieurs lignes de tableaux de la forme [nom d'un champ] : [input text ou autre],
je transforme :
<table> par <div class="form_ps">
<tr> par <div class="form_ligne">
<th> par <div class="form_titre">
<td> par <div class="form value">

Voici ce que ça donne au final (j'ai simplifié parce qu'il y a des trucs qui encombraient):

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<style>
.nice_block{
        margin-bottom : 15px;
        margin-top : 10px;
        height : auto;
        clear : both;
}
 
.form_ps div{
        -moz-border-radius : 0;
}
.form_ps{
        float : left;
        margin-top : 5px;
        margin-bottom : 5px;
        width : 100%;
        padding : 0;
        margin : 0;
        clear : both;
}
.form_ligne{
        float : left;
        clear : left;
        height : 22px;
        border-width : 1px 1px 0 1px;
        padding : 0;
        margin : 0;
        width : 100%;
}
.form_ligne .form_titre{
        float : left;
        width : 250px;
        height : 100%;
        padding : 0;
        margin : 0;
        padding-right : 3px;
        padding-left : 3px;
}
.form_ligne .form_value{
        float : left;
        width : auto;
        height : 100%;
        padding : 0;
        margin : 0;
}
</style>
 
	<div class="nice_block">
	<h1>{$l_calculate}</h1>
		<form name="ps" action="ajax.php" class="my_real_form" method="post">
		<input type="hidden" name="is_ps" value="1"/>
		<div class="form_ps">
			<div class="form_ligne">
				<div class="form_titre">{$l_date1}</div>
				<div class="form_value">
						<input type="text" name="ps_date1" id="ps_date1" value="{$ps_date1Ymd}" size="12" />
						<img src="{$jscalendar_path}/calendar3.gif" id="ps_trigger1" 
						style="cursor: pointer; border: 1px solid white;" 
						alt="Calendar" title="" border="0" onmouseover="this.style.border='1px solid green';" onMouseOut="this.style.border='1px solid white'" />
				</div>
			</div>
 
			<div class="form_ligne">
				<div class="form_titre">{$l_date2}</div>
				<div class="form_value">
					<input type="text" name="ps_date2" id="ps_date2" value="{$ps_date2Ymd}" size="12" />
					<img src="{$jscalendar_path}/calendar3.gif" id="ps_trigger2" 
					style="cursor: pointer; border: 1px solid white;" alt="Calendar" title="" border="0" 
					onmouseover="this.style.border='1px solid green';" 
					onMouseOut="this.style.border='1px solid white'" />
				</div>
			</div>
 
			<div class="form_ligne">
				<div class="form_titre">{$l_ps_nb_people}</div>
				<div class="form_value">
				<input type="text" size="12" maxlength="3" name="ps_no_people" value="{$ps_no_people}">
				</div>
			</div>
			<div class="form_ligne">
				<div class="form_value">
<input type="hidden" name="action" value="ps"/>
 <input type="submit" value="run" onclick="return ps(this);" />
				</div>
			</div>
		</div>
		</form>
 
	</div>

Quelques explications :
- ps() est une fonction java qui renvoie faux si elle s'effectue correctement. elle met à jour un div plus bas
- ce formulaire permet de choisir 2 dates en cliquant sur des calendriers, c'est pas intéressant et c'est un très vieux truc. (/* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * The DHTML Calendar, version 1.0 "It is happening again" * Details and latest version at:
* www.dynarch.com/projects/calendar */)
- les termes entre { } sont remplacés dans le traitement via Smarty (c'est pas moi qui ait décidé ça, mais c'est plutot sympa en fait).

Mon problème est que l'élément dont la classe est "nice_block" ne prend pas en compte son contenu en ce qui concerne la hauteur (ni FF, ni IE), ce qui a pour effet qu'un margin-top dans l'élément d'en dessous (ou margin-bottom pour celui là) n'a aucun effet.

Quelqu'un a-t-il une solution pour me sauver ?

**danielhagnoul** · 14/05/2009, 02h37

Bonsoir.

Ajout d'une div cachée, exemple :

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
 
    <div class="nice_block">
    <h1>{$l_calculate}</h1>
        <form name="ps" action="ajax.php" class="my_real_form" method="post">
        <input type="hidden" name="is_ps" value="1"/>
        <div class="form_ps">
            <div class="form_ligne">
                <div class="form_titre">{$l_date1}</div>
                <div class="form_value">
                        <input type="text" name="ps_date1" id="ps_date1" value="{$ps_date1Ymd}" size="12" />
                        <img src="{$jscalendar_path}/calendar3.gif" id="ps_trigger1" 
                        style="cursor: pointer; border: 1px solid white;" 
                        alt="Calendar" title="" border="0" onmouseover="this.style.border='1px solid green';" onMouseOut="this.style.border='1px solid white'" />
                </div>
            </div>
 
            <div class="form_ligne">
                <div class="form_titre">{$l_date2}</div>
                <div class="form_value">
                    <input type="text" name="ps_date2" id="ps_date2" value="{$ps_date2Ymd}" size="12" />
                    <img src="{$jscalendar_path}/calendar3.gif" id="ps_trigger2" 
                    style="cursor: pointer; border: 1px solid white;" alt="Calendar" title="" border="0" 
                    onmouseover="this.style.border='1px solid green';" 
                    onMouseOut="this.style.border='1px solid white'" />
                </div>
            </div>
 
            <div class="form_ligne">
                <div class="form_titre">{$l_ps_nb_people}</div>
                <div class="form_value">
                <input type="text" size="12" maxlength="3" name="ps_no_people" value="{$ps_no_people}">
                </div>
            </div>
            <div class="form_ligne">
                <div class="form_value">
<input type="hidden" name="action" value="ps"/>
 <input type="submit" value="run" onclick="return ps(this);" />
                </div>
            </div>
        </div>
        </form>
        <div style="visibility:hidden; clear:both; width:auto; height:12px;"><p>&nbsp;</p></div>
    </div>