Forum d'entraide PHPFrance

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

hi mec,

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

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

et voilààààà

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]

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%

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

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.

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

Tu as essayé ma solution?

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

genre height 100% aussi

Non je sais pas trop, mais fait nous voir le code actuel...

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

Netsupra

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!

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

@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

Forum d'entraide PHPFrance

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

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