Probleme simple (?) de layout

**LEK** · 17/10/2009, 11h30

Bonjour,
je suis en train de réaliser une page avec une mise en page css qui devrait avoir cet aspect final :

Code :

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

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é

) :

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

**bilcosby** · 17/10/2009, 18h41

salut

Il faut être plus explicite sur l'idée générale.

forcer la DIV A à occuper tout le reste de la colonne de droite...

Il y aura du texte, une image...dans cette div ?

tu veux qu'elle serve de "régulateur" ? c'est juste ?

tu peux peut-être mettre les 3 div dans un contener à hauteur fixe et un height 100% à ton div A...à tester

à suivre.....................>

**LEK** · 18/10/2009, 10h43

Merci de ta réponse. En fait je veux que la colonne de droite occupe toujours 100% de la hauteur de la page etre le header et le footer.
La div A contiendra du texte provenant d'une base de donnée (hauteur variable). Et les div B et C devront être "dockées" en bas , juste au dessus du footer : j'ai essayé de les positionner en absolu mais alors lorsque la div A est trop haute elle les overlap ...

tu peux peut-être mettre les 3 div dans un contener à hauteur fixe et un height 100% à ton div A...à tester

Le conteneur a hauteur fixe devrait théoriquement faire 100% de la hauteur entre le header et le footer et ça ne marche pas...
Que faire ?

**bilcosby** · 18/10/2009, 14h36

Je doute que ce soit possible en fait.

La div A ignore les deux div (B,C)en absolu, donc la div A ne se règlera pas en rapport avec c'est deux dernières !..

A mon niveau, je ne vois d'autre alternative que le Javascript.
1 => récupérer la taille de la page
2 => l'appliquer le height à la div A, en ayant soustrait la taille fixe de l'entête, ainsi que les tailles fixe du B du C et du pied de page..
C'est pas top, mais associer du % et de l'absolu ne me semble pas possible..

Dans l'attente d'autre avis plus éclairés..............@+
-
-
-

**LEK** · 25/10/2009, 21h48

Bon, merci pour ton aide. J'ai convertit une partie du projet en utilisant un tableau et cela fonctionne trés bien... Il faut croire que les css ne sont pas encore au point pour réaliser tout ce que l'on pouvait faire avec une présentation par table ;-)

@ +,
Lek

Probleme simple (?) de layout

CSS

Vue hybride

Discussions similaires

Partager

Partager