Forum Programmation.web Mettre en forme une page avec 4 div.

Posté par  .
Étiquettes : aucune
0
30
août
2005
Hello !
J'ai une page web dans laquelle j'ai 4 div. Jusque là, tout va bien. Le soucis, c'est de mettre ça en forme pour avoir 2 div par ligne.
Evidement, ces div n'ont pas la même largeur, sinon, ce serait trop simple.
Ma page se présente sous cette forme :


+---------------------+-----------------------------------+

|                       |                                    |

|                       |                                    |

|        D1           |            D2                    |

|                       |                                    |

+---------------------+------------+---------------------+

|                                     |                      |

|                                     |                      |

|                                     |                      |

|       D3                          |    D4              |

|                                     |                      |

|                                     |                      |

+-----------------------------------+---------------------+

Voici les contraintes :
D1+D2 = D3+D4 = largeur de la page affichée
La hauteur de D2 = la hauteur de D1 = la hauteur du plus haut des deux.
La hauteur de D3 = la hauteur de D4 = la hauteur du plus haut des deux.
J'ai cherché du côté des CSS, notemment en utilisant les propriétés display:block, float et clear, mais sans succès pour l'instant.
Si quelqu'un a une solution, je lui en serait vraiment reconnaissant.
Ah, oui, j'oubliais, je ne sais dans quel ordre placer ces div dans mon source.
Pour l'instant, j'ai D1, puis D3, puis D2, puis D4. J'ai partiellement réussi à obtenir ce que je voulais. A savoir que D3 est bien sous D1, D2 est bien à droite de D1, mais par contre, D1 et D2 n'ont pas la même hauteur, et D4 est en dessous du tout. Je continue de chercher, et si je trouve avant que l'on me poste la solution ici-même, je placerai la réponse, au cas où ça puisse servir à d'autres.

P.S. désolé pour cet ascii-art raté, mais je n'ai pas réussi à faire mieux ;-) !

  • # et le display ?

    Posté par  . Évalué à 2.

    Et pourquoi pas : 2 div, 1 par ligne, chacun de ces div contient les 2 div avec display:inline ?

  • # exemple

    Posté par  (site web personnel) . Évalué à 3.

    Bon j'ai un exemple qui marche (du moins si j'ai bien compris ton problème) mais y a un peu de js :

    http://www.allcolor.org/testjs/test.html(...)

    • [^] # Re: exemple

      Posté par  . Évalué à 1.

      Un grand merci, à tous les 2. Pour l'instant, la solution que tu proposes me donne le rendu que je souhaitais, mais elle reste plus complexe qu'une solution pure css.
      Je la garde donc, car elle répond à mes besoins, mais je suis déçu qu'il faille en passer par du JS pour arriver à un résultat aussi simple.
      En tout cas, merci pour tout.

  • # div conteneur

    Posté par  (site web personnel) . Évalué à 3.

    ptet que le plus simple est de fonctionner avec des div "conteneur". Tu places D1 , D2 dans un div "haut" et D3, D4 dans div "bas".
    Pour D1, D2 et D3, D4 soient placées l'une à coté de l'autre,

    div#D1
    {float: left;
    width: 80%}
    div#D2
    {margin-left: 80%}

    Pour que div "haut" soit au dessus de "bas" (ça devrait se faire tout seul normalement, mais bon, ça peut tre donner des idées pour d'autres solutions) :

    div#bas
    {width=100%}
    div#bas
    {width=100%;
    clear: left}

    Comme d'hab, ya plein de façons pour faire la même chose, plus ou moins gruik ...

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.