Utilisation de float imbriqués

**Oprichnik** · 14/11/2010, 18h01

Bonjour,

Je me pose la question de savoir comment faire pour utiliser plusieurs float et l'autre propriété qui lui est associé, clear.

Voici un exemple :

- J'ai sur ma page une colonne de menu à gauche (float: left)
- A droite de ce menu j'ai le contenu de la page
- Dans le contenu de la page j'ai une image qui float aussi à gauche

Je souhaite ajouter du texte en dessous de l'image mais pas en dessous du menu (dans le contenu de la page donc) comme çela se ferait si je mettait clear: left sur mon texte..

Comment faire ?

Merci

**12monkeys** · 14/11/2010, 23h39

Bonsoir

Je suis pas certain de bien tout comprendre...

Je dirais à priori de mettre l'image dans un paragraphe ou un div et de faire flotter cette balise. On y ajoute ensuite l'image et le texte dans cette balise...

Si ca ne correspond pas à ce que tu veux, ce serait mieux de nous montrer ton code voir mieux une page en ligne...

**Oprichnik** · 15/11/2010, 12h40

Voici un exemple de code :

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
35
36
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<div style="float:left; margin-right: 50px;">
    	<p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
    </div>
<div>
	  <p><img style="float:left" src="file:///C|/Users/ig3dessaintesm/Desktop/My Dropbox/Photos/Sample Album/Costa Rican Frog.jpg" width="384" height="287" />fefzfzefzegrer</p>
	  <p>errth</p>
	  <p>erh</p>
	  <p>erh</p>
	  <p>erh</p>
	  <p>zerherh</p>
	  <p>rhrrhrh</p>
 
      <p style="clear:both">texte en dessous image mais à droite du menu</p>
    </div>
</body>
</html>

Et voici ce que ça donne :

Nom : Untitled.jpg
Affichages : 112
Taille : 49,7 Ko

**scourjean** · 15/11/2010, 12h52

Et si tu testes cela :

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
35
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<div style="float:left; margin-right: 50px;">
    	<p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
        <p>menu 1</p>
</div>
<div style="float:left;">
	<p><img style="float:left" src="file:///C|/Users/ig3dessaintesm/Desktop/My Dropbox/Photos/Sample Album/Costa Rican Frog.jpg" width="384" height="287" />fefzfzefzegrer</p>
	<p>errth</p>
	<p>erh</p>
	<p>erh</p>
	<p>erh</p>
	<p>zerherh</p>
	<p>rhrrhrh</p>
	<p style="clear:both">texte en dessous image mais à droite du menu</p>
</div>
</body>
</html>

**Oprichnik** · 15/11/2010, 13h15

Oui, merci ça fonctionne

Cela signifie donc que clear est relatif au premier bloc englobant en "float" ?

**scourjean** · 15/11/2010, 13h21

Oui

**Oprichnik** · 15/11/2010, 13h23

Merci

**Candygirl** · 15/11/2010, 16h41

Envoyé par Oprichnik

Cela signifie donc que clear est relatif au premier bloc englobant en "float" ?

Pas tout à fait.

La propriété clear va agir sur tous les flottants concernés se trouvant dans la même contexte de formatage. Certes, la propriété float induit un nouveau contexte de formatage mais ce n'est pas la seule.

Dans ton cas, ajouter un float sur ton contenu ne serait pas fonctionnel si tu souhaites lui conserver une dimension flexible en fonction de la largeur de la fenêtre. Lui attribuer alors un overflow:auto serait plus judicieux et aurait le même effet. A voir selon les cas.

Utilisation de float imbriqués

CSS

Discussions similaires

Partager

Partager