[Résolu] Problème de Witdh (Box-sizing ?)

Bonjour,

J'ai besoin de réaliser une adaptation sur l'un de mes sites.
Il tourne sous Wordpress mais le théme est de moi.

Le site est contenu dans un Wrap de 1100px.
Ce Wrap a des border left & right de 10px.

Dans ce Wrap j'ai un bloc Content et un Aside (Display: table-cell).
Width du Content = 740px
Width du Aside = 340px

Mais quand j'inspecte les éléments avec Firefox et Chrome je me retrouve avec du 745px et 335px ...
Je n'arrive pas à comprendre pourquoi.

J'ai cherché sur le net, je suis tombé sur le Box-sizing, chose que je n'ai jamais utilisé et qui au final m'a mis le doute ...

Pour moi le Border et Padding ont toujours été compté dans le Width.
Si j'ai un Width de 1100px avec un padding-left de 10px mon bloc fera toujours 1100px et pas 1110px.
C'est comme ça que j'ai toujours fonctionné, juste le margin qui est en dehors du Width.

Pourriez-vous m'éclairer sur ce problème ? (745 et 335 au lieu de 740 et 340).

Voici l'adresse du site ; http://wp.newmeta.be/

Merci d'avance pour votre aide,
ZK

C'est simple : tu te trompais

Le modèle de boite standard définit que la largeur est celle du contenu interne à l’élément. La largeur de l’élément est donc cette largeur + les padding + les bordures.

box-sizing: border-box

précise que l'instruction width doit intégrer les bordures et padding. C'est également ce que faisait le fameux mode Quirks de IE dont tout le monde se plaignait. Plutôt marrant que désormais tout le monde l'applique .

Et le lien de la spéc (en anglais).

Ok mais alors :

#content {
border-left: 10px solid #1F1F1F;
border-right: 10px solid #1F1F1F;
display: table;
background: #ffffff;
width: 1100px;
}

Dans Chrome et Firefox on me donne une Width de 1080px.
Alors que d'aprés ce que tu dis j'aurais du avoir une Width de 1120px ?

Ps: Tu peux regarder mon site, l'affichage sans bien, c'est juste 745 à la place de 740 qui est vraiment bizarre.
Modifié par ZbergK (24 Sep 2014 - 17:56)

Ok je viens de trouver le problème ... c'est ma textarea dans les commentaires qui posé problème ...

Elle agrandissait le tout.
Modifié par ZbergK (24 Sep 2014 - 18:05)