Lier la hauteur de deux divisions en CSS

Je ne sais pas si c'est bien ca que tu voulais, mais j'ai réussi.

C'est plein de nombres à virgules, un peu trop de float je pense (à améliorer), mais ca marche.
http://ssylvainsab.free.fr/CCM/trois-boites-de-meme-hauteur.html

Salut Ssylvainsab (-:

Vraiment, ça m'intéresse.
Je n'ai jamais réussi à faire fonctionner des hauteurs, adaptables, en auto ou en %.

Bonne piste.
J'ai repris ton exemple, il ne fonctionne plus si on y insère du texte.
Ça déborde, les blocs ne s'adaptent pas au contenu : http://gihef.bey.free.fr/CCM/heightpourcent/Deux-boites_pourcents.html

Il est nécessaire que le bloc Principal ait une hauteur définie (pas en %) suffisante pour que le reste suive : http://gihef.bey.free.fr/CCM/heightpourcent/Deux-boites_pixels.html
Et l'adaptation est relative à la hauteur. Pas à un contenu variable.

Ce qui serait bien, ça serait de pouvoir utiliser un clear en bas. Mais un clear:quoi ? Il n'y en a pas d'adapté.
J'ai tenté ça dans http://gihef.bey.free.fr/CCM/heightpourcent/Deux-boites_pourcents_clear_auto.html
Là, on retrouve des hauteurs nulles pour les blocs vides de droite.
…

Vraiment, s'il y a une solution, ça m'intéresse.

Salut Ssylvainsab
Salut gihef :-)

Tu peux m'apeller Sylvain :o)

Ça déborde, les blocs ne s'adaptent pas au contenu
Et avec un overflow:scroll; (ou auto) sur le bloc qui contient le texte ?
Normalement, des barres de défilement sont ajoutées.

Ce qui serait bien, ça serait de pouvoir utiliser un clear en bas. Mais un clear:quoi ? Il n'y en a pas d'adapté.
Je pense qu'un hr (barre horizontale) avec clear:both et visibility:hidden; (ou display:none, à tester) serait pas mal, quoique le hr ne serait pas trop à sa place...

Tu peux aussi essayer un clear:right; sur le bloc bas-droite, ou alors un float:top sur le bloc haut-droit et un clear top sur le bas.

Bref, un peu fouillis ces idées, mais à essayer.

a plus

Bonsoir.

Je ne suis pas sur de comprendre : tu veux faire une mise en page avec une colonne x à gauche, et deux colonnes y et z à droite, de facon à ce que la hauteur de x soit égale à celle de y + celle de z, et que les bords des boites soient à la même hauteur ?

Ce qui donnerait quelquechose comme :

------------+-----------------+
            l     Boite y     l
   Boite    l-----------------+
            l                 l
     x      l     Boite z     l
            l                 l
------------+-----------------+

Désolé si ce n'est pas du tout ca, mais c'est ce que j'ai compris.

Pour ca, je pense que tu peux mettre les 3 boites dans une seule boite.
Ensuite, utiliser margin:0 et padding:0 sur les 4 boites, puis définir une hauteur de 100% à la boite x et de 75% et 25% (par exemple) aux deux autres boites.

Pour définir des hauteurs verticales et relatives, voir :
css definir une hauteur verticale et relative a un element

j'espère que je t'ai aidé.

Bonjour,

À ma connaissance ça n'est pas encore possible. En CSS3, je crois que c'est prévu.

La seule manière que je connaisse est l'utilisation de tableaux. Les cellules prennent la hauteur de la plus haute.

La plus haute a une hauteur fixe ? Ou s'adapte-t-elle au contenu ?