Probleme simple (?) de layout
Bonjour,
je suis en train de réaliser une page avec une mise en page css qui devrait avoir cet aspect final :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
---------------
| Header |
----------------
| |A |
| |_ |
| Center |B |
| |_ |
| |C |
| | |
----------------|
| Footer |
----------------| |
Je suis parti d'un gabarit semi fluide sur deux colonnes. J'essaye d'afficher l'ensemble dans un gabarit fluide mais mon problème est le suivant :
- connaissant la hauteur des div B et C comment forcer la DIV A à occuper tout le reste de la colonne de droite ?
- connaissant la hauteur du footer, comment s'assurer de le garder en toute circonstance celui-ci en bas de la page (j'ai trouvé des méthodes qui réagissent bizarrement au redimensionnement...)=> j'aurais préféré ne pas avoir à faire du positionnement absolu
Voici plus ou moins mon code actuel (celui-ci sera récrit et nettoyé :lol:) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<body>
<div style="width:100%;height:100%;">
<div style="height:125px" id="header">Header</div>
<div id="center">
<div style="float:left">Center</div>
<div style="float:right;width:230px">
<div style="border:1px solid red;">A </div>
<div style="border:1px solid blue;height:100px">B</div>
<div style="border:1px solid green;height:100px">C</div>
</div>
</div>
<div style="height:21px;clear:both;position:absolute;bottom:0px" id="footer">Footer</div>
</div>
</body>
</html> |
Merci par avance,
Lek.
