Div en float:left dans une autre div
Bonjour
J'ai fait une div de 770 px (largeur de mon site) et a l'intérieur je voulais mettre 3 autre div sous forme de colonnes 200px de large chacune espacé de 42.5px)
Le problème c'est quand je fait ca mes "colonnes" se mettent en dessous de ma div de 770 au lieu de se mettre dedans pourquoi ?
voici le code css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| body
{ margin: 0px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
#col1,#col2,#col3 {
width:200px;
float:left;
padding-left:42.5px;
} |
et le code d'"essai" html
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
40
41
42
43
| <!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="ecran.css" />
</head>
<body>
<div id="conteneur">
<div id="col1">
xxxxx<br />
xxxxxx<br />
xxxxxxxxxx
xxxxxxx<br />
xxxxxxxxxx
</div>
<div id="col2">
xxxxx<br />
xxxxxx<br />
xxxxxxxxxx
xxxxxxx<br />
xxxxxxxxxx
</div>
<div id="col3">
xxxxx<br />
xxxxxx<br />
xxxxxxxxxx
xxxxxxx<br />
xxxxxxxxxx
</div>
</div>
</body>
</html> |
Merci de vos réponses
