Deux colonnes, une ligne -> deux cellules de même hauteur...

Eléphant du PHP | 187 Messages

21 janv. 2009, 23:28

Bonsoir,
J'ai tenté quelque chose sur cette page :
http://creditoit.fr/informations.php

Pourriez vous me dire comment faire cela (que les deux blocs aient la même hauteur) sans utiliser de tableau (tout le site est entièrement mis en page à l'aide de CSS, ce serait dommage de tout gâcher sur cette page :)).

Merci,
Netsupra

Eléphant du PHP | 447 Messages

22 janv. 2009, 05:47

hi mec,

j'pense que tu trouveras ton bonheur sur cette page:

http://openweb.eu.org/articles/initiation_float

et voilààààà :D
Probably (only a) Human Problem?

Eléphant du PHP | 187 Messages

22 janv. 2009, 11:41

Merci pour le lien, mais le cas de figure dans lequel je suis ne s'y trouve pas : j'ai deux boites qui doivent etre identiques (meme hauteur, meme largeur), mais qui ont un contenu différent en longueur.
Le probleme du float c'est que lorsque je definis une boite, je ne sais pas si l'autre est plus grande ou pas... Et comme les elements sont sortis du flux, elles prendront uniquement l'espace dont elles ont besoin, puisqu'elle n'ont aucun rapport l'une et l'autre.

Netsupra

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

ViPHP
ViPHP | 3607 Messages

22 janv. 2009, 12:01

Essaye comme ceci:
Tu prends un conteneur global pour ces deux boites:
où le height est renseigné...
Et ensuite sur tes deux boites tu mets un height:100%

Eléphant du PHP | 447 Messages

22 janv. 2009, 12:11

... j'ai deux boites qui doivent etre identiques (meme hauteur, meme largeur), mais qui ont un contenu différent en longueur...
En fait tu veux faire des boites en 3d... 8-)

je plaisante!

alors si je comprends bien ton idée: tu veux des boites de hauteur et largeur égal, mais dont les contenus respectifs peut avoir une longueur différente...
la solution est sur cette page:
http://openweb.eu.org/IMG/article52/annexe3.html

Code : Tout sélectionner

.float { float: left; width: 50%; margin: 1em 0; }

Code : Tout sélectionner

<div class="float"> ... </div> <div class="float"> ... </div>
Il te suffit juste de modifier le css au niveau du height, mais là faut encore savoir ce que tu veux... et je ne suis pas sûr d'avoir bien saisi.
Probably (only a) Human Problem?

Eléphant du PHP | 187 Messages

22 janv. 2009, 13:00

Sauf que je ne connais pas a l'avance la taille du contenu ni de l'un e ni de l'autre boîte, tout dépend de la taille des teasers de 3 dernières news qui peuevent etre sur 1, 2 ou 3 lignes. Je ne sais donc pas quel height mettre...
J'avais deja essayé cette solution en utilisant ul comme conteneur des deux li, d'où tous les commentaires dans le fichier css.

Merci pour vos réponses,
netsupra

ViPHP
ViPHP | 3607 Messages

22 janv. 2009, 13:10

Tu as essayé ma solution?

Eléphant du PHP | 187 Messages

22 janv. 2009, 13:28

Ben heu, non, puisque je ne sais pas quoi mettrre dans le height du conteneur global :s
netsupra

ViPHP
ViPHP | 3607 Messages

22 janv. 2009, 13:44

genre height 100% aussi ;)
Non je sais pas trop, mais fait nous voir le code actuel...

Eléphant du PHP | 187 Messages

22 janv. 2009, 13:50

J'ai donné l'adresse de la page, parceque sinon, je ne sais pas quel bout mettre.
L'adresse du CSS est
http://creditoit.fr/stylesheets/informations.css
http://creditoit.fr/stylesheets/general.css
Ces deux css sont inclus dans la page. General definit tout ce qui est global dans le site, informations.css, tout ce qui n'a rapport qu'a cette page.

Le coup du height 100% ca risque d'etre un peu violent :D
Netsupra

ViPHP
ViPHP | 3607 Messages

22 janv. 2009, 14:18

essaye quelque chose comme ça:

Code : Tout sélectionner

<div id="global"> <div id="gauche">....</div> <div id="droite">...</div> <span id="clear">&nbsp;</span> </div>
et le css

Code : Tout sélectionner

#global { height: 100%; } #gauche,#droite { float: left; height: 100%; } #clear { clear: both; }
Si ça marche pas met nous le code testé içi!

Mammouth du PHP | 2937 Messages

22 janv. 2009, 15:36

Pour avoir deux colonnes de même hauteur, quelle que soit la longueur du contenu, on peut recourir à display: table-cell. Plus de détails là : http://css.britoweb.net/post/Creer-des- ... eur-en-CSS ;)

Eléphant du PHP | 187 Messages

22 janv. 2009, 21:05

@jojolapine, ca ne marche pas, les colonnes sont toujours de hauteurs différentes....
@victorbrito : j'avais essayé quelque chose a base de table cell mais ce n'est pas compatible avec ie et je n'avais pas reussi a espacer les deux colonnes...

netsupra