Problème avec hauteur automatique et float:left

**thunderfear** · 01/03/2008, 12h20

Bonjour,

J'ai un petit problème avec mon code. Je vous donne le code:

Code css :

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
91
92
93
94
95
96
97
98
99
100
101
<style>
 
#content {
 
	width:790px;
 
	background-color:#0099CC;
 
	margin:0 auto 0 auto;
 
	padding:0 16px 0 16px;
 
 
 
	height:auto;
 
}
 
#header{
 
	display:block;
 
	height:220px;
 
	width:100%;
 
	background-image:url(header_bg.gif);
 
	text-align:center;
 
	margin:0;
 
	padding:0;
 
}
 
 
 
#kwickcontainer {
 
	margin:auto 0;
 
 
 
	width:790px;
 
	margin:-77px auto 0 auto;
 
	padding-left:8px;
 
	padding-right:8px;
 
	background-color:#fff;
 
}
 
.col2 {
 
overflow:inherit;
width: 250px;
 
float:left;
 
margin-left: 20px;
 
 
}
 
.col1 {
height: 50px;
 
width: 460px;
float:left;
 
margin-left:15px;
 
}
 
.bloc1 {
 
height:auto;
border:solid #1B87BB 1px;
 
}
 
</style>
 
<div id="content">
<div class="col1">
 
   <div class="bloc1" >Texte ici<br />Texte ici<br /></div>
 
</div>
<div class="col2">
 
   <div class="bloc1" >Texte ici<br />Texte ici<br /></div>
 
</div>
 
 
</div>

Avec ce code, la couleur de la classe "content" ne s'affiche pas. dès que je retire float:left de col1 et col2, la couleur d'arrière-plan s'affiche mais j'ai besoin de float:left pour faire les 2 colonnes.

Donc en gros, j'aimerai garder les 2 colonnes et ne pas être obligé de mettre une valeur fixe pour le height de la classe "content".

Merci d'avance pour votre aide.
A bientôt

**riaStudio** · 01/03/2008, 12h43

Ton conteneur (ici #content) dois lui aussi être en "float: left"

**Candygirl** · 01/03/2008, 13h08

Le contenu des flottant s'écoulant hors du flux principal, il n'est pas pris en compte par le conteneur. Pour forcer le conteneur à le prendre en compte, tu peux lui attribuer une propriété qui crèe un nouveau contexte de formatage. Par exemple:

Code :

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

overflow:auto

A noter que sur IE le nouveau contexte de formatage est déjà effectif (bug) par la haslyout donné par le width.

**thunderfear** · 01/03/2008, 15h23

Merci pour vos réponses.

J'ai testé la solution de candygirl et c'est exactement ce qui me fallait

**Vinceee38** · 04/05/2011, 10h07

Envoyé par Candygirl

Le contenu des flottant s'écoulant hors du flux principal, il n'est pas pris en compte par le conteneur. Pour forcer le conteneur à le prendre en compte, tu peux lui attribuer une propriété qui crèe un nouveau contexte de formatage. Par exemple:

Code :

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