probleme de disposition

Version imprimable

Bonjour, j'ai un probleme de disposition en css
voici ma strcture html:

Code:

1
2
3
4
5
6
7
8
 
<div id="page">
   <div id="conteneur">
      <div id="photo"></div>
      <div id="info"></div>
      <div id="detail"></div>
   </div>
</div>

Avec le css suivant:

Code:

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
 
#page {
	position: relative;
	margin:0 auto;
	width: 800px;
	text-align: left;
	border: #000 1px solid;
	background-color: #E5E5E5;
}
 
#conteneur {
	position: relative;
	width: 800px;
}
 
#photo{
	position: relative;
	float: left;
	width: 250px;
	padding-left: 3px;
	padding-top:3px;
}
 
#info{
	position: relative;
	float: right;
	width: 547px;
}
 
#detail{
	position: relative;
        float: right;
	width: 547px;
}

Donc le probleme est que les 3 div (photo,info,detail) ne rentrent pas dans conteneur, donc il n'y a pa le cadre autour de ces 3 div (seulement sous firefox)

23/11/2008, 15h31
|PaRa-BoL

rajoute un <br style="clear: both" /> après le dernier div
23/11/2008, 15h39
HiRoN

Ajouter overflow:hidden sur le div #conteneur ?
23/11/2008, 15h39
Erwan31

|PaRa-BoL, il est préférable d'ajouter iun overflow:hidden sur le bloc conteneur pour éviter justement d'avoir à ajouter un élément HTML (HR ou BR le plus souvent) ;)

@leroidje.
Pourquoi mettre un position:relative à tous tes blocs?
23/11/2008, 15h42
|PaRa-BoL

Erwan31 un overflow hidden va cacher les éléments qui dépassent plutôt que d'agrandir le conteneur non ?
23/11/2008, 15h44
HiRoN

Citation:

Envoyé par |PaRa-BoL

Erwan31 un overflow hidden va cacher les éléments qui dépassent plutôt que d'agrandir le conteneur non ?

J'aurais plutôt dit : Va "englober les éléments flottants".
23/11/2008, 15h51
|PaRa-BoL

Effectivement je ne savais pas qu'un overflow hidden avait cet effet là :aie:
23/11/2008, 15h57
leroidje

Merci pour l'astuce du overflow....je ne connaissais pas!
23/11/2008, 17h29
Erwan31

Citation:

Envoyé par |PaRa-BoL

Erwan31 un overflow hidden va cacher les éléments qui dépassent plutôt que d'agrandir le conteneur non ?

Tu fais bien de t'interroger puisque si le bloc doté de l'overflow avait eut une
hauteur fixe ou en %, le fait d'agrandir les polices (Ctrl++ sur Safari et IE6-) masquerait les textes présent dans le bloc flottants qui s'allongent sur la hauteur. Mais ça ne pose pas de problème ici puisqu'aucune hauteur n'est indiquée ;)

@leroidje Ne pas oublier de manière général de conférer le layout (actif ici via la propriété width) pour IE6- au bloc doté de l'overflow pour qu'il englobe ses enfants flottant.