hauteur de div automatique

[aFauchere]

bonjour,

J'ai un petit soucis, voici un code html qui contiens quelques divs et un formulaire.
Pour le moment le div conteneur a une hauteur fixe, mais quand je met sa hauteur en "auto", il perd sa hauteur et n'est pas plus haut que le <h3>

quelqu'un peut me dire comment faire pour que sa hauteur soit dynamique ?

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div id="RightC_top" class="conteneurTable">
						<div class="leftCorner"></div>
						<h3>Criteria</h3><div class="rightCorner"></div>
						<form method="post" action="rs/portfolios/{portfolioId}/sports/{sportId}/event-types" class="criteria">
							<div class="formContainer">
								<div class="required numeric labelTop firstSearch" style="width:150px; padding-right:0px;">
									<label for="portfolioName">Portfolio :</label>
									<select name="portfolioId" class="portfolioId">
									</select>
								</div>
								<div class="required numeric labelTop" id="sportList" style="width:150px; padding-right:0px;">
									<label for="sportId">Sport :</label>
									<select name="sportId" class="sportId">
									</select>
								</div>
							</div>
							<div class="button">
								<input type="submit" class="SPRIT button search btnSearch" name="search" value="" />
							</div>
						</form>
					</div><!-- END RightC_top -->

Code css :

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
 
 
.conteneurTable h3{    
	background-image: url("../images/background_h3.gif");
    background-repeat: repeat-x;
    color: white;
    display: block;
	font-weight:normal;
    height: 22px;
    margin-bottom: 0;
    padding-left: 10px;
    padding-top: 5px;
	border-bottom:1px solid #7c7c7c;
}
.conteneurTable .rightCorner{
	background-image:url("../images/title_corner_right.gif");
	float:right!important;
	height:27px;
	width:6px;
	position:absolute!important;
	top:0px!important;
	right:-1px;
}
.conteneurTable .leftCorner{
	background-image:url("../images/title_corner_left.gif");
	float:left;
	height:27px;
	width:4px;
	position:relative;
	left:-1px;
	right:1px;
	top:0px!important;
}
.conteneurTable{
	position:relative;
	border-bottom: 1px solid #7b7b7b;
    border-left: 1px solid #7b7b7b;
    border-right: 1px solid #7b7b7b;
    height: 88px;
    width: auto;
	background-color:#F7F7F7;
}
#RightC_top div{
	float:left;
	background-color:#f7f7f7;
	position:relative;
	top:7px;
}
 
#RightC_top div.firstSearch{
padding-left:11px;
width:120px;
}
#RightC_top div.firstSearch input{
	width:71px;
}
#RightC_top div.secondSearch input{
padding-left:0;
width:349px;
}
#RightC_top div.thirdSearch{
padding-left:0;
top:23px;
width:200px;;
}
#RightC_top div.thirdSearch input{
	position:relative;
	top:0px;
}
#RightC_top div.button{
float:right;
position:relative;
top:21px;
margin-right:11px;
}
 
#RightC_top div.labelTop label{
	float:left;
	width:100%;
	margin-bottom:3px;
	display:block;
}
#RightC_top div.labelTop input[type=text]{
	background-color: #E8F3FF;
    border: 1px solid #BFC6CF;
    float: left;
    height: 20px;
    padding-top: 0;
}
form{margin:0}

Merci d'avance

[NoSmoking]

Bonjour,
problème de conception à grand coup de DIV, qui plus est sont sortis du flux because

Code :

1
2
3
4
5
6
#RightC_top div{
	float:left;
	background-color:#f7f7f7;
	position:relative;
	top:7px;
}

ce qui fait que la hauteur du conteneur est de "0" après création de la page.

Supprimes déjà le float:left; et tu verras la différence.

[nsanabi]

ou place un

Code :

<div style="clear:both"></div>

juste avant la fermeture de la balise du div source de problème