Positionnement de div dans une div "conteneur"

**Giill** · 23/11/2007, 11h50

Bonjour,

Difficile de résumer ma question dans le titre.

J'ai une page web qui s'affiche.
J'ai placé une div "conteneur", qui doit contenir l'ensemble des élements de ma page. Elle est en fond bleu.
Au chargement de la page, une div contenant une liste de boutons radio s'affiche. Sous IE, cette div est bien incluse dans la div "conteneur" (i.e. elle est sur fond bleu). Mais sous les autres navigateurs (Firefox, Opera et Safari), elle n'est pas totalement incluse dans le conteneur.
Le problème semble venir du "float:left"...Mais j'ai besoin de ce style, car lorsque je clique sur un bouton radio, j'affiche une div que je veux positionner à droite de ma liste.

Bref, voici le code que j'utilise, ça sera plus clair. Sous IE6, le comportement est tel que je le souhaite. Pour les autres navigateurs, la div "div1" n'est pas contenue dans le conteneur...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>	
	<link href="style.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript" src="test.js"></script>
 
</head>
<body>
	<div class="conteneur">  
		<div class="div1">
			<div>    
				<input id="rb1" type="radio" name="rb" value="1" onclick="info(this.value)" />    
				<label for="rb1" class="lbl">OPTION 1</label>
			</div>
			<div>    
				<input id="rb2" type="radio" name="rb" value="2" onclick="info(this.value)" />    
				<label for="rb2" class="lbl">OPTION 2</label>
			</div>
			<div>    
				<input id="rb3" type="radio" name="rb" value="3" onclick="info(this.value)" />    
				<label for="rb3" class="lbl">OPTION 3</label>
			</div>
			<div>    
				<input id="rb4" type="radio" name="rb" value="4" onclick="info(this.value)" />    
				<label for="rb4" class="lbl">OPTION 4</label>
			</div>    
		</div>    
		<div id="div2" class="div2">
		</div>		    
	</div>
</body>
</html>

La feuille de style "style.css" :

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
.conteneur
{    
    width:100%;    
    padding-top:10px;
    padding-bottom:10px;
    background-color: #A1BCE9;        
}
.div1
{   
    padding-left:5px;  
    width:100px; 
    float:left;
}
.lbl
{   
    width:100px; 
}
.div2
{   
    display:none; 
    border:solid 1px #FFFFFF;
    background-color:#E9A5A1;
    width:300px;    
    margin-left:200px;    
}

Le petit script de test "test.js" :

Code :

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

1
2
3
4
5
function info(val)
{   
    document.getElementById("div2").style.display="block";    
    document.getElementById("div2").innerHTML="test "+val;    
}

Il doit s'agir d'une question triviale...

Merci pour toute information.

Pour illustrer le problème, je joins une copie d'écran du résultat obtenu sous IE6 (celui que je souhaite) et sous Safari (identique sur Firefox et Opera) : http://img258.imageshack.us/my.php?i...esultatqy0.jpg

**Candygirl** · 23/11/2007, 16h30

hello,

avec ton width de 100% (par ailleurs inutile à moins qu'il ne corrige un problème lié au haslayout sur IE) Internet explorer crèe par erreur un nouveau contexte de formatage ce qui oblige le conteneur à prendre en compte le contenu des flottants.

Vu que c'est justement le comportement que tu souhaites, tu peux ajouter une propriété qui crèe justement un nouveau contexte de formatage mais, cette fois-ci selon les normes css2.1. Par exemple:

Code :

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

1
2
3
.conteneur { 
  overflow:hidden;
}

**Giill** · 23/11/2007, 16h54

Ca fonctionne parfaitement.

Merci beaucoup Candygirl !

Positionnement de div dans une div "conteneur"

Positionnement en CSS

Discussions similaires

Partager

Partager