Mise en page site grand public : flexbox, boostrap ?

Bonjour,

Je dois développer un site en html pur qui a la tête suivante, cf PJ.
Je me demande quelle est la solution pour mettre en page mes blocs sachant que je dois répondre aux contraintes suivantes : un mini-site touchante près de 50% de la population française donc avec tous types de versions de navigateurs (même du IE 6 j'imagine) et bien sûr du mobile / tablette.
Je voulais utiliser un template Boostrap, mettre un main-container fixed avec une width de 1170px mais après je coince : comment gérer le bloc 1 par rapport aux 4 autres ? c'est à dire que sur mobile, les blocs 2 à 5 passent bien en dessous du bloc 1. Je vois bien les 3 colonnes Boostrap mais j'ai du mal à imaginer comment gérer la hauteur de mes blocs 2 à 5.
Merci de vos conseils et bonne journée !

Bonjour,

Newki75 a écrit :
même du IE 6 j'imagine

Heu peut-être pas quand même.

Newki75 a écrit :
... et bien sûr du mobile / tablette.

Ah ! C'est là qu'il faut choisir : soit les 60% d'utilisateurs sur mobile, soit le petit 0.5% restant sur IE6-8 (et les 40% de temps de dev' supplémentaire pour les atteindre)...

Vous pouvez toujours développer pour les deux supports mais, étant donné que vous vous posez encore la question sur les moyens à mettre en oeuvre, ça va être coton pour vous. Ce ne serait de toute façon pas simple non plus pour un intégrateur chevronné, je vous rassure.

Pour le coup - moi qui suis un inconditionnel du modèle flexbox depuis peu - je pense que, si le site doit être large en rétrocompatibilité (on va dire à partir de IE8) rien ne vaux une bonne vieille combinaison de floats. Un peu moins rétrocompatible : voir aussi du côté de display:table. La propriété inline-block tire très bien sont épingle du jeu elle aussi mais attention aux white spaces entre les éléments.

Newki75 a écrit :
Je vois bien les 3 colonnes Boostrap mais j'ai du mal à imaginer comment gérer la hauteur de mes blocs 2 à 5.

Et oui : avec flexbox cette problématique serait simple à résoudre, avec les autres méthodes il n'y aura pas 36 solutions : il faudra définir une hauteur fixe sur certains conteneurs (pas bien)...