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

par **netsupra** » 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

par **Victor BRITO** » 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

par **jojolapine** » 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!

par **netsupra** » 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

Netsupra

par **jojolapine** » 22 janv. 2009, 13:44

genre height 100% aussi

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

par **netsupra** » 22 janv. 2009, 13:28

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

par **jojolapine** » 22 janv. 2009, 13:10

Tu as essayé ma solution?

par **netsupra** » 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

par **Stef** » 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...

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.

par **jojolapine** » 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%

par **netsupra** » 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]

par **Stef** » 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ààààà

par **netsupra** » 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

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

Répondre

Étendre la vue Revue du sujet : Deux colonnes, une ligne -> deux cellules de même hauteur...

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