[Résolu] Problème de taille

Bonjour à tous

Dans le site https://tests.osirisnet.net j'ai défini il y a quelques années un certain nombre de modèles que le propriétaire utilise à sa guise, ce qui lui permet d'avoir des présentations standards sans avoir à se plonger dans le CSS.

Entre autres il y a un modèle "insert" qui est traduit par une balise <aside> centrée dans la page, avec un <header> et un texte, avec éventuellement une image dans le texte.

La plupart des temps le texte est assez long et vient s'inscrire à droite de l'image, par exemple https://tests.osirisnet.net/tombes/nobles/rekhmire100/rekhmire100_07.htm#mouou

Il y a un cas où l'image est plus grande que le texte
https://tests.osirisnet.net/docu/akhenaton/akhenaton_02.htm#daughters

Je ne trouve pas comment faire sans modifier très fortement l'ensemble du CSS, pour que la balise <aside> s'agrandisse pour inclure l'ensemble du texte et de l'image.
Une idée?
Merci de vos conseils
Modifié par PapyJP (05 Dec 2020 - 12:55)

Il y a cet article : https://www.alsacreations.com/article/lire/7-depassement-flottants-css.html qui peut t'éclairer .

display:table sur .insert ferait aussi l'affaire et accepterait margin:auto (risque cependant de s'agrandir sur la largeur ) et puis float:left/right qui ne centre pas et qui déplace le problème.

overflow:hidden etait souvent le meilleur compromis , aujourd'hui flex et grid relèguent float aux lettrines(::first-letter) et shape-outside principalement .

Cdt

L'article n'est pas très clair à ce sujet.
Si une boîte a une taille donnée, overflow:hidden signifie que ce qui ne tient pas dans la boîte doit être caché, ça c'est clair
En déduire que si la boîte n'a pas de hauteur définie, c'est la boîte qui s'agrandit pour qu'il n'y ait pas de débordement, c'est une autre histoire qui mériterait d'être expliquée clairement.

Non non, tu n'as pas besoin de passer tes float en flex ou grid, là ton image en float est tout à fait un usage classique et approprié (j'en dit trop ou pas assez, désolé pour la confusion).

C'est un problème de gestion de flottant et de contexte de formatage.

https://developer.mozilla.org/fr/docs/Web/CSS/Block_formatting_context

Il y a plusieurs valeur de display possible sur le parent, overflow ou un pseudo( ou dernier élément ) placé en clear (... le space.gif des années 90)
Edit : Voici quelques exemples sur ton HTML qui diffèrent sur la méthode et le rendu ainsi qu'une boite en grid sans float https://codepen.io/gc-nomade/pen/MWjJOxX (en esperant ne pas ajouter plus de confusion )

Pour le overflow:hidden sans height définie, cela oblige le navigateur a calculé précisément la taille du parent en prenant en compte les enfants dans le flux , du coup le flottant est pris en compte avec l'espace qu'il occupe et height reste indéfinie dans le CSS pour le parent
Modifié par gcyrillus (13 Dec 2020 - 15:34)