Aligner div horizontal

**Soulama** · 02/05/2010, 02h20

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 :

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
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

**Yorick** · 02/05/2010, 11h28

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%.

**Soulama** · 02/05/2010, 13h34

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 :

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

width=auto

pour le div content.

**Yorick** · 02/05/2010, 15h31

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%.

Aligner div horizontal

Positionnement en CSS

Discussions similaires

Partager

Partager