Discussion :

[leroidje]

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

Code :

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

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 :

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
 
#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)

[|PaRa-BoL]

rajoute un <br style="clear: both" /> après le dernier div

[HiRoN]

Ajouter overflow:hidden sur le div #conteneur ?

[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?

[|PaRa-BoL]

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

[HiRoN]

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".

[|PaRa-BoL]

Effectivement je ne savais pas qu'un overflow hidden avait cet effet là

[Erwan31]

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.