Remonter un bloc dans la page

[Bob]

Bonjour à tous,

Je souhaite placer un encadré à côté d'un article, pour approfondir un point abordé dans l'article.

Dans mon code, le bloc qui correspond à l'encadré est placé en bas du texte.

Mais dans ma mise en page, j'aimerai placer ce bloc à côté du texte, à droite par exemple.

J'ai essayé avec un vertical-align négatif, mais le texte de l'article disparaît en partie derrière l'encadré.

Est-ce que vous avez une solution ?

Bob

[Guest meta nando]

Salut Bod,

Peut-être devrais-tu placer ta boîte en positionnement float.

Voir: Openweb - Initiation au positionnement CSS : 2.position float

[Bob]

C'est ce que je faisais jusqu'à aujourd'hui, mais ça m'oblige à placer le code du bloc en haut de page (puis float: right), alors que sémantiquement, sa place est en bas (de mon point de vue).

Est-que sortir la totalité de l'article du flux avec un float: left pour positionner l'encadré est une solution ? Ca me parait disproportionné, et surtout source de problèmes en cascade...

[LaurentDenis]

Est-que sortir la totalité de l'article du flux avec un float: left pour positionner l'encadré est une solution ? Ca me parait disproportionné, et surtout source de problèmes en cascade... 

En conservant l'ordre HTML que tu souhaites (article avant l'encadré), tu peux:

- placer l'article entier en float et ton encadré en flux. Ceci n'a rien de disproportionné : libre à toi d'appliquer les règles de ton choix aux blocs de ton choix C'est en fait une solution très classique pour gérer le positionnement d'un contenu et d'un menu.

- réserver une marge latérale d'un côté de ton article, et utiliser un positionnement absolu pour ton encadré, en visant l'espace ainsi dégagé.

Ce qui sera peut-être délicat, ce serait de vouloir aligner verticalement ton encadré avec un point donné de l'article. Dans ce cas, une troisième solution à explorer:

- placer ton encadré dans le fil de l'article (div spécifique)

- utiliser la marge latérale de la solution précédente, et un positionnement relatif.

Pour la complexité de mise en oeuvre de tout cela, tout dépend de la structure de ta CSS actuelle et des potionnements que tu y utilises déjà...

[Bob]

L'idée de la marge me plait bien, je vais essayer dans ce sens.

Merci pour l'idée !