Positionement CSS3 sans tableau inline-block

**e-toon** · 14/10/2013, 18h46

Bonjour tout le monde ! Voilà je débute en css et je bute sur ceci:

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
71
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<title>test</title>
<style type="text/css">
html, body {
  padding:0;
  margin:0;
  height:100%;
}
#global {
   height:100%;
   width:100%;
}
 
.rouge, .vert, .bleu, .jaune {
  display:inline-block;
  vertical-align:top;
}
 
.haut{
	height:10%;
}
.bas{
	heigth:90%;
}
.rouge {
	background: red;
	width:10%;
	height: 100%;
}
.vert {
   background: green;
   width:90%;
   height: 100%;
}
.bleu {
   background: blue;
   width:10%;
   height: 100%;
}
.jaune {
   background: yellow;
   width:90%;
   heigth:100%;
}
</style>
</head>
 
<body>
<div id="global">
  <div class="haut">
    <div class="rouge">
      <p>texte</p>
    </div><!--
    --><div class="vert">
      <p>texte</p>
    </div>
  </div>
  <div class="bas">
    <div class="bleu">
      <p>texte</p>
    </div><!--
    --><div class="jaune">
      <p>texte</p>
    </div>
  </div>
</div>
</body>
</html>

Pourquoi diantre ma <div> "bas" ne fait-elle pas 90% de ma fenêtre stp ? Merci d'avance