[Résolu] Grille fluide avec Dreamweaver CC 2014

bonjour à tous,
je suis sur un projet responsive, et j'ai voulu tester l'assistant Dreamweaver dédié à cela.
Globalement, je trouve que l'outil est pas mal et permet assez rapidement de mettre une structure responsive en place en WYSIWYG.
J'ai cependant un comportement qui me perturbe. Alors soit j'ai rien compris au CSS, soit je suis con et un détail m'échappe mais voila mon exemple
et quelques explications :
design responsive en 12 colonnes, un header (vert pale) et un footer (vert pale) sur 12 colonnes, 2 colonnes en milieu de page, une sur 3 colonne à gauche (la rouge) et une sur 9 colonnes à droite (la bleue)

Tout se présente bien jusqu'au moment où je décide d'appliquer un padding:20px à mes blocs rouge et bleu afin de décoller le texte des bords.

A partir de là, le bloc bleu, à droite, passe à la ligne.
Je n'arrive pas à comprendre pourquoi le padding, sensé mettre une marge interne au bloc, vient influer la largeur (extérieure) globale du bloc et donc le faire passer à la ligne... ?

Si quelqu'un peut m'expliquer...

merci de votre aide
Modifié par jp.bond (18 Sep 2014 - 01:09)

box-sizing:border-box sur tes blocs devrait resoudre ton problème

merci beaucoup pour cette réponse nette et précise.
je ne connaissais pas cette commande css et c'est parfait !
je vais m'en resservir à présent

Bonjour,

Je déconseillerai l'usage systématique de "box-sizing" qui n'est à ce jour que partiellement reconnue par les navigateurs : http://caniuse.com/#search=box-sizing

Ensuite, ton problème peut être résolu de manière bien plus propre et naturelle, retiens quelque chose les sites responsive sont entièrement calculés en %, et jamais en px, sinon c'est statique; et donc bien loin de la philosophie responsive.

Pour faire court, remplace tes padding: 20px par padding: 3% (fais des tests pour ajuster les valeurs), et tu observeras en conséquence le padding s'adapter selon la largeur de la fenêtre.. Si malgré cela tu as encore des retours à la ligne, c'est simplement que tes conteneurs sont trop larges, réduis-les en width en %.
Modifié par ohweb (29 Sep 2014 - 10:01)

et pourquoi ne pas utiliser le WYSIWYG de Dreamweaver CC 2014 qui est justement fait pour faire de la mise en place responsive sur les 3 résolutions cibles ? Adobe a mis en place un outil fait exprès, je ne vois pas pourquoi il faudrait tout se frapper en code... je ne dis pas que ce n'est pas perfectible, mais cela permet de gagner du temps au départ...