Problème de "float"

**Axiol** · 10/06/2008, 19h03

Salut salut,
J'ai une petit problème, mais avant, un schéma pour mieux me faire comprendre:

En fait j'aimerais un la hauteur de 1 s'adapte en fonction de la hauteur de 2 et de 3 (si 2 est plus grand, 1 s'adapte sur 2, ...). Mais je bloque...
Voici mes codes sources:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
 <head>  
  <title>Test</title>  
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
 </head>  
 
 <body>
  <div id="top_box"></div>
  <div id="mil_box"> <!--Correspond à 1 dans le schéma -->
   <div id="box_gauche"> <!--Correspond à 2 dans le schéma -->
   </div>
   <div id="box_droit"> <!--Correspond à 3 dans le schéma -->
   </div>
  </div>
  <div id="bot_box"></div>
 </body>
 
</html>

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
body {
 background-color:#1a1a1a;
}
 
#top_box {
 width:772px;
 height:24px;
 margin:auto;
 background-image:url(images/top_box.jpg);
}
 
#mil_box {
 width:772px;
 margin:auto;
 background-image:url(images/mil_box.jpg);
}
 
#box_gauche {
 float:left;
 width:181px;
 height:50px;
 margin-left:15px;
 margin-right:39px;
 background-color:#0066CC;
}
 
#box_droit {
 float:left;
 width:512px;
 height:100px;
 background-color:#c22b2b;
}
 
#bot_box {
 width:772px;
 height:24px;
 margin:auto;
 background-image:url(images/bot_box.jpg);
}