Aligner div horizontal

Version imprimable

Bonjour,
jessaye de faire un template rien avec des div, et je coince pour le moment sur comment aligner les div left et content horisontallement.
voice mon code:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Default Template</title>
    <style>
 
.borderedBlock {
 background: #f3a11f;
 color: blue;
 font-weight: bold;
 border: solid #E9601A;
 border-width: thin;
 padding: 2px 2px 2px 6px;
 margin: 2px;
}
 
#header {
 text-align: center;
}
 
 
#left {
 padding: 10px;
 width: 10%;
 vertical-align: top;
 float: left;
}
 
#content {
 padding: 10px;
 vertical-align: top;
 float: left;
 width: 80%;
}
 
#footer {
 text-align: center;
}
 
.clear {
clear:left;
}
 
 
 </style>
  </head>
  <body>
 
   <div id="header" class="borderedBlock">
         Header
   </div>
 
   <div id="left" class="borderedBlock">
         Left
   </div>
 
    <div id="content" class="borderedBlock">
		Content
    </div>
 
	<div class="clear"></div>
 
 
    <div id="footer" class="borderedBlock">
		Footer
    </div>
 
  </body>
</html>

Question: comment je fais pour que le width du div content prendt le reste de lespase libre.

Merci

02/05/2010, 11h28
Yorick

Salut,

Tu veux mêler des valeurs absolues (les px) avec des valeurs relatives (%), pas possible d'arriver à occuper 100% d'un espace comme ça. Il faudrait pouvoir recalculer les dimensions en pourcentages selon la résolution d'affichage.

Utilise des % pour tes toutes les valeurs de padding ou margin lattérales (left et right)
exemple :
margin : 10px 0.5% 15px 1%;
est correct, tu peux mélanger absolu et relatif dans une même déclaration.

edit: par prudence, prévoit une occupation sur 98 ou 99% plutot que sur 100%.
02/05/2010, 13h34
Soulama

merci Yorick pour la reponce, mais javou que je nais pas bien compris.
ce que je veux pour le moment cest:
le div left prends 10% de width et le div content prends le reste du width du browser.
donc la question est ce quil ya un truc come:

Code:

width=auto

pour le div content.
02/05/2010, 15h31
Yorick

Je disais que si tu utilises des % pour le width de #left et #content, tu dois aussi utiliser des % pour les padding et margin -left et -right.

Et je conseille que le total de ces % fasse 98 ou 99% plutot que 100%.