1

yop,

J'aimerais faire appel à vos compétences en CSS pour un problème assez récurrent : le layout en colonnes (deux, dans mon cas). Je voudrais obtenir deux colonnes à largeur variable et de hauteurs identiques (pour que leurs border-bottom soient alignés), quels que soient leurs contenus. À première vue ça semble simple, en pratique je n'arrive pas à trouver une solution qui fonctionne sous IE et Fx (histoire de changer).

Dans mes exemples, la première colonne est à largeur fixe, mais a priori ça ne change pas le problème.

Première approche (screenshot fx) : deux "div", le premier en float:left et le second en float:none. Le positionnement est correct, mais impossible de régler la hauteur du div en float:left (height:100% ne fonctionne qu'à condition de définir manuellement la taille de tous ses parents, ce qui n'est pas envisageable puisqu'ils sont variables). Accessoirement le rendu est très différent sous IE et Fx.

Deuxième approche (screenshot fx) : toujours deux "div", mais cette fois les deux en float:left. Il faut du coup penser à mettre un clear à la fin, mais cette solution a le bon goût d'avoir le même rendu sous Fx et IE. Par contre le problème initial est toujours présent : impossible d'avoir les deux "div" de la même hauteur.

Troisième approche (screenshot ie, screenshot fx) : deux "td" dans un tableau dont l'attribut "border-collapse" est activé. Ah les tableaux c'est génial parceque contrairement aux CSS, ça marche. Presque. Sous IE (6) le résultat est parfait, mais Firefox (3) fait un peu n'importe quoi : le tableau se met à mordre sur le "div" qui le contient, sans raison logique (et puis les bords du tableau disparaissent sous ceux des "td", mais c'est plus anecdotique). Dommage, parcequ'à part ce comportement étrange mon problème était résolu : les deux "td" font bien sûr la même hauteur.

Y a-t'il une raison que j'ignore et qui explique le comportement de Firefox, et une solution qui marche bien existe-t-elle pour ce problème ? (tous les layouts à deux colonnes de même hauteur que j'ai trouvés sur Google utilisent des colonnes à largeur fixe, ce qui ne m'intéresse pas). Merci smile
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

2

juste par curiosité, pourquoi ne pas régler le problème différemment pour Fx et IE ? (c'est moche comme méthode, mais c'est souvent le plus simple)
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

3

j'aime pas trop cette solution :/

et surtout là je n'ai pas du tout la possibilité de régler le problème pour Firefox, il n'y qu'un seul de mes 3 cas qui fonctionne bien, et uniquement avec IE :/
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

4

Bon, il semblerait que l'attribut "border-collate" de Firefox fonctionne différemment de celui d'IE et d'Opera. D'après cet article il est conforme au standard, mais mon problème est légèrement différent et il s'agit à mon avis d'un joli bug (un élément auto-dimensionné qui se met à dépasser de son parent quand on fixe un attribut qui n'est pas censé modifier sa taille, c'est plutôt curieux).

Bref, j'ai supprimé "border-collate" et j'ai spécifié cellpadding="0" et cellspacing="0" dans le code HTML : ça marche. Il n'y a aucun attribut CSS équivalent à ces deux propriétés ? (quand on cherche sur Google on trouve plein de sites qui expliquent que border-collate fait la même chose, mais c'est faux).
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

5

<TABLE><TD>colonne 1</TD><TD>colonne 2</TD></TABLE> gni
avatar
Mes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

6

J'ai pas compris à quelle question tu répondais ?
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

7

À ta question de départ. Parce que ce que tu demandes, c'est exactement ce que fait un tableau.
avatar
Mes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

8

Kevin Kofler (./5) :
<TABLE><TD>colonne 1</TD><TD>colonne 2</TD></TABLE> gni

heu... il ne manque pas un TR ? hum (j'ai pas le souvenir que le TR soit optionnel)

9

./7 : Justement, les tableaux posaient problème avec Firefox, ce n'est qu'au post 3 que j'ai trouvé une solution.
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

10

Et t'as essayé un tableau en CSS ? (Enfin, je crois que ça ne passe pas sous IE6, et surtout c'est vraiment galère à mettre en place).
avatar

11

j'ai tenté display:table et display:cell-table, je sais pas si c'est de ça dont tu parles ? (si oui, effectivement ça marche assez mal sous IE)
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

12

(Oui,c'est ce dont je parle, mais c'est méta chiant avec les displays table/table-row etc.)
avatar

13

méta chiant carrément ? bon je vais passer mon tour alors ^^
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

14

Tu peux tenter, hein grin Mais je trouve ça vraiment lourd pour simuler des <table>
avatar

15

je rejoinds un peu kevin la, meme si on a pas tout le contexte, pkoi tu n'utilises pas un tableau pour le coup?
j'ai l'impression que maintenant tout le monde essaye de ne pas mettre de tableaux... okay, c'est pas super pour plein de trucs et les DIV/CSS suffisent generalement, mais pour ton cas, p-e que le tableau est bien approprie

16

mais heu... lisez le topic grin

je *veux* utiliser des <table> (enfin je voulais, puisque c'est ce que j'ai fait au final), c'est juste que c'était buggé sous Firefox à cause de l'attribut border-collapse qui fait n'importe quoi
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

17

en fait, le border-collapse ne fait pas que superposer les borders des différentes cases, il décalles ces borders de 0.5*(la largeur du border). C'est sa facon de les superposer : au lieu de ne pas décaler la première case et de bien positionner les autres cases par rapport à cette première, il réduit de 1*(la largeur du border) les dimensions des cases et décale le border de 0.5*(la largeur du border), d'où ton effet de superposition avec l'élément parent.

par contre, pour les cellspacing et cellpadding, si tu trouves un réel équivalent CSS, ca m'intéresse !
Ancien pseudo : lolo

18

Oui, ce que tu décris est le comportement de Firefox mais je le trouve assez curieux puisqu'il change du même coup la taille du tableau ; ni Opera ni Internet Explorer ne font comme ça (ils se contentent de superposer les bords internes).

Je n'ai pas trouvé d'équivalent à cellspacing et cellpadding, j'ai pas l'impression que ça existe :/ (au pire c'est pas très grave, mais je trouverais plus logique d'avoir cet attribut dans la CSS plutôt que dans le code HTML)
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

19

t'as essayé de voir le résultat sous FF3 ? car si ca se trouve, ils l'ont corrigé... mais sinon, je trouve le mode de fonctionnement de IE plus normal (c'est bien la première fois...)

pour cellspacing cellpadding : tout à fait d'accord avec toi...


et du coup, t'as opté pour la solution en table avec cellpadding et cellspacing à 0 ? Car le pb avec cette solution c'est que ca va pas à la ligne automatiquement si il n'y a plus de case, alors qu'en float, il y a moyen, non ?
Ancien pseudo : lolo

20

yep j'ai testé sous Firefox 3 (d'ailleurs je n'ai testé qu'avec lui, je n'ai plus le 2 sur cette machine)

sinon oui j'ai pris la solution avec cellpadding/cellspacing, par contre je comprends pas trop l'histoire d'aller à la ligne automatiquement ? (là je voudrais une disposition en deux colonnes qui ne change jamais quelles que soient les hauteurs des colonnes, donc le comportement des <table> & <td> correspond tout à fait à ce qu'il me faut)
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

21

ah ok, je pensais que tu voulais avoir un nombre de cases aléatoire smile
Ancien pseudo : lolo