[Résolu] Bootstrap problème d'alignement de DIV

Bonjour,

Je suis face à un soucis avec l'utilisation du système de colonage de bootstrap.
J'ai trois div, deux premières div côté à côté qui divise la page en deux, la troisième div vient se mettre en dessous mais au niveau de la seconde div qui à une hauteur plus grande que la première.

Du coup ça me laisse un grand espace vide côté gauche. Un dessin vaut mieux qu'un long texte je pense.

http://image.noelshack.com/minis/2016/41/1476086535-problemediv.png

J'aimerai que la DIV en rouge remonte vers la div bleu.
Merci d'avance
Modifié par Quentinnyx (10 Oct 2016 - 17:02)

Bonjour,

C'est le comportement normal des blocs et c'est assez dur de faire des colonnes dynamiquement avec des blocs de tailles différentes.

Le plus simple est de mettre tes bloc 1 et 3 dans une même colonne qui sera a coté de ton bloc 2.

Sinon je t'invite a lire cet article : http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html et éventuellement à chercher des librairies de multicolonne en Js.

Merci pour la réponse, pourquoi n'ai je pas pensé à cette solution de mettre mes divs 1 & 3 dans la même colonne. En tout cas ça fonctionne merci beaucoup.

Edit : Correction au niveau des numéros des divs. 1 & 2 -> 1 & 3.
Modifié par Quentinnyx (10 Oct 2016 - 16:55)

Bonjour et bienvenue,

Quentinnyx a écrit :
solution de mettre mes divs 1 & 2 dans la même colonne

1 et 3 tu veux dire (2 étant à doite celle qui est la plus haute) ?
Ben si dans le code HTML, 3 avant 2 ça ne veut rien dire, c'est peut-être pour ça que tu faisais comme ça
Ce que tu cherches à faire est simple avec l'ordre HTML suivant :
* 1 - 3 - 2 (droite)
* 2 (droite) - 1 - 3 (ex: float: right; pour 2)

En résolution "mobile", tu peux jouer avec flexbox, affichage en colonne et modifier l'ordre des blocs avec la propriété order.

CSS3 multicolonne, c'est bien tant que ça fonctionne et chez moi ça ne fonctionnait jamais avec toutes les contraintes que j'avais pour du layout… Je voudrais pas en dégoûter les autres mais...

Merci pour le complément d'infos et les flexbox. Et j'ai corrigé la petite erreur dans mon poste précédent, c'étais bien 1 & 3
Modifié par Quentinnyx (10 Oct 2016 - 16:59)