padding sur div, le div change de taille

**petitours** · 12/03/2012, 18h17

bonjour

Quand je mets un padding sur un div pour éloigner le texte de la bordure du div, c'est la dimension du div qui change, je ne comprends pas.

exemple ici

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
    color: #000000;
    background-color: #ffffff; 
}
 
 
#left {
width : 200px;
background-image : url(fleche.gif);
background-repeat: no-repeat; 
background-position: left bottom;
padding-left: 0px;
padding-right: 0px;
 
}
 
#right {
float: right;
margin-top: 10px;
width: 250px;
background: #00ff00; /* ton code hexadecimal pour la couleur verte */
padding : 0px;
}
 
 
.conteneur{
width : 450px;
background: #ffffff;
}
 
.clear{
clear : both ;
}
 
 
  </style>
</head>
 
<body>
 
 
<p>youpla</p> 
 
<div class="conteneur">
 
<div id="right">tutut2 fdsf f qsfjdkl  fjskjfs jf jfs<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtr<br>qtrk jsqfk jqsklf jqsd jqskf jqsfk jqsdkl fjkls l</div>
<div id="left">tutu1 fsrqtr<br>qtrflksdflmsdk d d d d d d  d d   fslmdk fsjkf qsfklmf qsfskm<br>qtrtrz te t et <br><br></div>
</div>
 
<div class="clear">plop popopo</div> 
 
 
</body>
</html>

si on met autre chose que 0 pour les padding dans #left et #right, les deux div se chevauchent, bref la gestion du padding est ingérable, je suis obligé de retoucher la dimension de tous mes éléments quand j'ajuste d'une bricole un padding pour l'affichage du texte !

Comment dois je procéder pour éloigner mon texte du bord d'un div sans modifier l'"encombrement" du div ?

merci par avance

**NoSmoking** · 12/03/2012, 20h03

Bonjour,
mets dans ta DIV une DIV avec un margin:20px; ainsi tu ne toucheras pas à la largeur de la DIV conteneur.

padding sur div, le div change de taille

HTML

Discussions similaires

Partager

Partager