Positionnement DIV en CSS

**Kabanon** · 24/10/2007, 09h05

Bonjour,

voici un petit problème de positionnement de DIV en CSS :

Je souhaite abolir les tableaux, et donc me voila fasse à des positionnements CSS en float.

J'ai deux blocs DIV (DIV1 et DIV2 ) positionnés l'un à côté de l'autre donc en float:left avec une largeur prédéfinie. Le bloc DIV3 doit quand à lui se retrouver en dessous des deux blocs précédents. Cependant, je ne peux pas utiliser la propriété clear:both à cause du menu de droite, car il utilise également la propriéré float:left...

Voici le code de la page concerné" :

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
37
38
39
 
<html>
<head>
	<link href="./css/default.css" rel="stylesheet" type="text/css" /> 
	<script type="text/javascript" src="./js/default.js"></script>
</head>
<body>
<div id="menu">
	<ul>
 
		<li><a href="#" title="">M1</a></li>
		<li><a href="#" title="">M2</a></li>
		<li><a href="#" title="">M3</a></li>
	</ul>
</div>
<div id="main">
	<div id="contenu">
		<!--
		796px
		398px
		-->
 
		<div id="div1" class="contenu_by_2" style="background:#EDF">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
		</div>
		<div id="div2" class="contenu_by_2" style="background:#FDE">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</div>
 
 
		<div id="div3">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</div>
	</div>
</div>
</body>
</html>

Le code du CSS :

Code :

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

1
2
3
4
5
6
7
8
 
body{margin:0px auto;font-size:11pt;width:980px}
h1,h2,h3,p{margin:0;padding:0}
ul{margin:0;padding:0;list-style:none;}
#menu{float:left;width:180px;border:1px solid #000;height:300px}
#main{margin-left:184px;}
#contenu{height:340px}
#contenu div.contenu_by_2{float:left;border:1px solid #000;width:396px}

Comme je pense ne pas avoir été explicite, voici un lien pour voir le problème : http://kabanon.info/xhtml/

D'avance merci,
kabanon

**Candygirl** · 24/10/2007, 10h13

Envoyé par Kabanon

Cependant, je ne peux pas utiliser la propriété clear:both à cause du menu de droite, car il utilise également la propriéré float:left...

Je suppose que tu parles du menu de gauche ? autrement je ne comprends pas ...

En positionnant ton #main à l'aide d'un margin-left, celui-ci reste dans le flux principal et il est donc normal que le clear tienne compte du menu. Pour éviter ce problème, il faut que le #main crèe un nouveau contexte de formatage afin que le clear n'intervienne que sur les éléments descendants du #main.

Dans ton cas, puisque tu as un site de largeur fixe, le plus simple est d'attribuer un float (left ou right) à ton #main, ce qui résoudra non seulement ton problème, mais te permettra aussi de t'affranchir du bug des 3px sur IE6.

**Kabanon** · 24/10/2007, 12h20

Parfait !! Je viens de faire la modif et tout marche comme souhaité !

Merci également pour les explications css.
Kabanon

Positionnement DIV en CSS

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager