Positionnement DIV en CSS
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:
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:
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
