[Résolu] Ajuster une hauteur de conteneur en mode flottant

Bonsoir à tous
Ma question concerne la page https://www.osirisnet.net/news/@n_06_20.htm?fr
Que feriez vous pour éviter ce débordement en bas de page?
Modifié par PapyJP (28 Jun 2020 - 22:41)

Réponse: mettre une balise vide avec clear:both
Il y en a une dans le modèle que j'ai donné au propriétaire du site, mais il l'avait supprimée parce qu'elle était vide.
Comme ça fait plusieurs années, j'avais oublié!
Modifié par PapyJP (28 Jun 2020 - 22:56)

Bonsoir,

en modifiant le display de #pageBody en display:grid sans autre mise forme de grid, tu vas modifier le contexte de formatage de celui-ci ainsi que de ses enfants directs (header/article). Les éléments flottant ne devraient plus débordés .

Les méthodes classiques sont du genre article::before,article::after {content:'';display:table;width:100%} ou article{overflow:hidden;}.

Cdt

<edit> Ma réponse a croisé ta solution sans que je ne l'ai vue </edit>
Modifié par gcyrillus (28 Jun 2020 - 23:54)

Note bien que la solution de gcyrillus avec la règle ajoutée sur un pseudo élément permet d'éviter l'ajout d'une div (et donc éviter sa suppression par erreur).

Merci de vos réponses
Après les déboires que j’ai eus avec un utilisateur néo-zélandais de ce site qui utilise IE j’hésite à utiliser des choses trop "modernes" donc "grid" je ne sens pas très bien comme on dit. Même si IE le supporte, ce dont je ne suis pas sûr, ça risque fort d’être "à la mode IE"
Je vais regarder les pseudo éléments, ça me semble moins risqué.
Ne pas oublier que toute modification du CSS va s’appliquer aux plus de 200 pages de news du site accumulées au fil des années. J’ai passé plusieurs mois il y a 4 ans à relooker ces anciennes pages, je n’ai pas envie de remettre ça

On se demande : "qui utilise encore IE?" mais il y a des milliers d’entreprises qui ont un intranet avec des applis internes basées sur IE. Les employés ne vont pas changer de navigateur quand ils naviguent à l’extérieur de l’intranet.

Merci de ta réponse
Autant j’utilise à foison les flex-bidules sur d’autres sites, autant pour ce site particulier pour lequel je ne suis que conseiller technique j’ai peur de toucher au château de cartes de peur s’il s’écroule.
C’est sûr ce forum que j’ai pris contact avec le propriétaire du site.lm
Le problème était double: d’une part faire en sorte que le site soit un peu plus au goût du jour, d’autre part donner au propriétaire des outils qui lui permettent de mettre cela en œuvre par lui-même. Ça m’a pris, deux ans entre l’analyse du problème, l’élaboration de la solution, son acceptation par le propriétaire, la migration du millier de pages existantes sans toucher à leur contenu et la mise en œuvre finale.
Le propriétaire est un expert en égyptologie mais pour faire des textes présentés à son goût il écrit ses pages dans un dialecte HTML réduit en utilisant un certain nombre de "snippets" que j’ai mis à sa disposition. Malgré mes efforts il persiste à écrire des choses comme

<p><strong>le titre</strong><br>le texte sur 850 caractères avec des <br> voire des <br><br> et tout de même la plupart du temps il ferme le </p>

C’est tout à fait naturel. Que ferions nous toi et moi si nous devions écrire un texte en hiéroglyphes ?
L’apprentissage de quelques bribes de HTML on été pour lui un effort similaire à l’apprentissage desdits hiéroglyphes. Mon rôle est de l’aider à partager son savoir qui est grand (il écrit dans des revues scientifiques internationales) et non de le brider. Nous avons trouvé un équilibre qui lui permet de continuer ses publications savantes et vaut à ce site un certain succès parmi les spécialistes.
Tout cela pour expliquer pourquoi je ne fais des modifications que quand il demande un changement.
Donc parmi les excellentes choses que vous m’apprenez tous les uns et les autres sur ce forum, je n’en met que certaines en œuvre sur ce site et me défoule sur mon malheureux site de chorale qui me sert de terrain d’expérimentation

Bonne nuit
Modifié par PapyJP (30 Jun 2020 - 00:23)

gcyrillus a écrit :


Il y aurait aussi flex :

#pageBody  {
    display:flex;
    flex-direction:column;
}

... bien compris à partir de IE11, qui se chargera de contenir les flottants sans autres artifices. (idem : contexte de formatage modifié sur les enfants direct, ça coute une ligne de plus que grid )

J'ai essayé cette solution, elle marche sur IE.
Je la mettrai dans la prochaine version, ça protégera au cas où.
Merci encore

Post-Scriptum:
La solution flexbox a été mise en œuvre sur le site officiel.
Merci de m'avoir poussé à le faire.
Je ne vais malheureusement pas reprendre l'ensemble du CSS du site pour le flexboxiser , bien que ce ne soit pas le désir qui me manque, mais c'est comme le le tramway ou les pistes cyclables: ça fait trop de chantiers dans la ville