[Résolu] Choisir quel élément fixe la largeur d'un div ?

Bonjour,

J'ai un div dont je ne souhaite pas fixer la largeur en CSS, mais dont je voudrais que la largeur soit automatiquement déterminée par l'un de ses fils.

Le div en question a deux fils :
* Le premier est un paragraphe de texte
* Le deuxième est un tableau

Je voudrais que le tableau fixe la largeur du div, et que le texte s'y adapte (et donc que le paragraphe de texte ait la même largeur que le tableau). Mais rien à faire, le paragraphe étant plus large que le tableau, c'est lui qui fixe la largeur du div…

J'ai réussi à résoudre le problème sur Firefox / Chromium en mettant un display: table-caption sur le paragraphe, mais rien à faire pour Opera…

Auriez-vous une solution ?

Merci !
Modifié par Pod (31 Mar 2014 - 17:28)

Alors en faite les élément div et p sont en display block par défaut donc ill prennent 100% de la largeur du parent. Donc quand tu croit que c'est le p qui "fixe la largeur" c'est tout simplement qu'il prend toute la largeur laissé par ta div parente.

Peut tu m'expliquer comment tu fixe la largeur de ton tableau? Si tu la fixe en css dans ce cas tu n'a plus qu'à appliquer la même largeur à ta div parent (en pensant à faire rentrer paddings et margins dans le calcul).

En fait, je ne fixe aucune largeur.

En gros, mon div est une colonne sur la gauche, dont j'aimerais ne pas fixer explicitement la largeur.

Mon tableau n'a pas de largeur fixée non plus, mais est environ 2 fois moins large que mon paragraphe. J'aimerais que ce soit lui qui impose la largeur et non le paragraphe du coup.

Je pourrais le faire en deux lignes de Javascript, mais il doit y avoir un moyen full CSS, non ?

Typiquement, voici la situation que j'ai : http://jsfiddle.net/q6Ezk/

A part fixer une largueur à ton tableau et la même à ta div, je ne vois pas comment faire sans bidouiller un truc peut conventionnel.

Ok. Ma solution à base de display: table-caption fonctionnait bien, mais ça me semble être un gros hack et je ne sais pas vraiment pourquoi ça marche…

Du coup, je pense que je vais passer par deux lignes de JS pour le faire, sauf si quelqu'un a une idée de génie

salut,
ce que tu proposes peux être une solution et tu pourrais ajouter un "display:table" sur leur conteneur commun pour n'occuper que l'espace nécessaire. Un exemple par ici.

Pod a écrit :
Ok. Ma solution à base de display: table-caption fonctionnait bien, mais ça me semble être un gros hack et je ne sais pas vraiment pourquoi ça marche…

Du coup, je pense que je vais passer par deux lignes de JS pour le faire, sauf si quelqu'un a une idée de génie

En quoi serait-ce un hack , display c'est display , et tu attends d'un élément a ce qu'il se positionne au dessus de son parent , table-caption t'assure que l’élément ainsi formater se cale sur la largeur de son parent formater en table.

De plus cela te donnes accès a caption-side : bottom/top ; et right / left qui eux, pour le coup ne semble pas fonctionner dans Opéra , mais le display:table-caption fonctionne parfaitement dans ton cas, et encore dans la dernière version d'Opéra.

Je n'ai rien contre la solution js, c'est juste que ça marche dans opera si il reconnait un parent en display:table / inline-table .
Cdt,

<edit>j'ai aussi une demo http://codepen.io/anon/pen/uKLGr/
Modifié par gc-nomade (31 Mar 2014 - 12:13)

Bonjour.

Tu peux tout simplement attribuer à ton paragraphe la même largeur qu' à ton tableau...

@thierry : je ne peux pas car je n'ai spécifié aucune largeur.

@gc-nomade : je disais que c'était un hack car ça marchait, mais sans vraiment savoir pourquoi, et en l'occurrence c'était un peu bancal…Je préfère une solution en CSS si possible et j'aime bien ta solution, qui marche nickel. Par contre, j'avais besoin d'une bordure sur la droite de mon #legend, donc j'ai du rajouter un div "table" intermédiaire.

Merci, sujet résolu

un reset sur les margin et ça passait : http://codepen.io/gc-nomade/pen/catpI