probleme float et clear

**michel18** · 28/11/2007, 14h01

Bonjour,

J'ai un problème de mise en page avec float. Voila j'ai un bloc à gauche et un autre à droite qui sont des menu. Un bloc au centre contient le contenu de la page. Je "règle" les 2 bloc de menu avec float:left et float:right en leur donnant une largeur spécifique. Cela fonctionne.

Dans le bloc du centre, j'aurais des images que je voudrais entourer du texte correspondant à cette image. J'utilise donc un float pour l'image. Cela fonctionne.

Mais parfois je voudrais qu'un paragraphe n'entoure plus l'image, mais qu'il "passe à la ligne" pour se mettre en dessous de l'image, j'utilise "clear". Mais voila le clear me fait passer en dessous du bloc de gauche ou/et de droite, et non en dessous de l'image (c'est le mot "clear" dans le code qui suit).

Quelqu'un aurait-il une solution ou un conseil, un exemple ?

Code HTML :

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
<html>
 
<body>
	<div style="float: left; width: 145px; background: yellow;">
		<p>menu 1</p>
		<p>menu 1</p>
		<p>menu 1</p>
		<p>menu 1</p>
	</div>
 
	<div style="float: right; width: 145px; background: blue;">
		<p>menu 2</p>
	</div>
 
	<div style="background: red;">
		<img style="float: left;" src="images/logo.jpg" />
		<p>bla bla bla bla bla bla bla bla bla bla bla</p>
		<p style="clear: both;">clear</p>
	</div>
 
</body>
 
</html>

**michel18** · 28/11/2007, 21h05

Une solution :

Code HTML :

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
<html>
 
<body>
	<div style="position: absolute; left: 0; top: 0; width: 145px; background: yellow;">
		<p>menu 1</p>
		<p>menu 1</p>
		<p>menu 1</p>
		<p>menu 1</p>
	</div>
 
	<div style="position: absolute; right: 0; top: 0; width: 145px; background: blue;">
		<p>menu 2</p>
	</div>
 
	<div style="background: red; margin-left: 145px; margin-right: 145px;">
		<img style="float: left;" src="images/logo.png" />
		<p>bla bla bla bla bla bla bla bla bla bla bla</p>
		<p style="clear: both;">clear</p>
	</div>
 
</body>
 
</html>

probleme float et clear

CSS

Vue hybride

Discussions similaires

Partager

Partager