28111 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de float

Dans la page https://tests.osirisnet.net/news/@@n_09_17.htm?fr, j'ai mis dans l'ordre
- une <figure> qui contient la première image
- le paragraphe en français
- une figure qui contient la deuxième image
- le paragraphe en anglais

J'escomptais que la deuxième image soir placée à droite du paragraphe en anglais?
On constate qu'elle vient se mettre au dessous.
Par contre si je réduis la taille des images, elles se positionnent correctement, mais ce n'est pas ce que je veux faire.

Pour contourner le problème, j'ai mis les deux images au début, ce qui donne https://tests.osirisnet.net/news/@n_09_17.htm?fr qui est esthétiquement satisfaisant.

Reste que j'aimerais comprendre pourquoi la première solution ne donne pas le résultat escompté, alors que j'ai utilisé cette syntaxe dans de nombreuses circonstances sans problème.
voir par exemple le dernier article de https://tests.osirisnet.net/news/n_08_17.htm?fr
La seule chose qui diffère, c'est la taille des paragraphes, mais ça ne me donne pas d'explication cohérente à ce phénomène.

Merci de vos conseils
Modérateur
bonsoir,

Il te faut penser a se dégager des flottants pour ne pas se glisser entre eux .
Par exemple:
p[lang="en"] {
    clear: left;
}


Si ce n'est pas le résultat escompter, alors de mettre les fottants en premier est la façon de faire. Un flottant s’accole a la hauteur d'un autre flottant si il le precede et qu'il a la place, sinon il fait un retour à la ligne avant de se positionner en flottant.

Ce que tu peut aussi faire, en partant de tes 2 flottants en avant dans le flux, c'est d'en faire descendre un en te servant d'un pseudo, lui aussi flottant.

Par exemple https://codepen.io/gc-nomade/pen/zEKYjZ ( depuis: https://tests.osirisnet.net/news/@n_09_17.htm?fr )
.news:before {
  content:'';
  float:right;
  height:14em;/* valeur arbitraire ou à calculer sur la position du paragraphe "en" */
}
[data-pres="right"]{
  clear:right;
}

Modifié par gcyrillus (22 Sep 2017 - 00:15)
Meilleure solution
@gcyrillus
Merci de cet éclaircissement!
Je pense comprendre le fonctionnement de ce phénomène, je vais modifier mes feuilles de style pour en tenir compte!
Modifié par PapyJP (22 Sep 2017 - 15:43)
Sujet clos
Aller à