Discussion :

[EIN-LESER]

Bonjour a tous.

Voila une petite question.
J'ai des éléments qui sont censé prendre 100% de la largeur de la dive dans la quelle ils sont placés.
Tout fonctionnait bien jusqu’à ce que j'ajoute un peux de décoration (bordures en 3d entre autre).

Mais du coup mes éléments dépassent légèrement de la div.

Sauriez vous me dire si il existe un moyen de régler le width sur 100% mais en enlevant le nombre de px correspondant chez moi aux bordures.

Merci d'avance.

[Bisûnûrs]

Tu peux utiliser la propriété CSS3 box-sizing: border-box; reconnue sur tous les navigateurs récents.

(IE à partir de la version 8)

[EIN-LESER]

J'ai testé dans le code mais cela me réduit l’élément a 1/4 de la largeur de la div.

[Candygirl]

Bonjour,

Un petit padding de 5px sur le parent ne pourrait-il pas faire l'affaire ?

Logiquement, si c'est un width de 100% alors il n'a pas de raison de flotter donc un simple margin sur l'élément, sans spécifier de width devrait convenir ( et il prendra la place à disposition dans son parent).

S'il est positionné en absolut, c'est alors facile en jouant avec la définition conjuguée des 2 dimensions left et right ou/et top et bottom

[miss_socrates]

En fait, il y a une différence de compréhension des margin et padding chez IE.
Chez Firefox, la largeur inclut les margin et padding tandis que IE ajoute ces px de padding et margin à la largeur donnée ce qui explique que "ça dépasse" avec IE (je pense que c'est le seul navigateur comme ça).
Une possibilité serait donc d'inclure la div de 100% dans une autre div un peu plus grande. Donc on aurait par ex. la div1 (parent) à 900px et la div2 inclue, celle qui est à 100 %.
Donc sur tous les navigateurs, la largeur de la div2 sera de 100% càd 900 px et sur IE elle sera de 100% + les 5px de margin (+ le padding éventuel) ce qui fera 905px.

[Candygirl]

En fait, il y a une différence de compréhension des margin et padding chez IE.

Ceci n'est valable que sur IE en mode Quirks, soit les versions inférieures à IE5mac ou plus récentes mais sans doctype déclaré.

Sur toutes les versions plus récentes, la déclaration d'un docytpe complet, tout en haut du document, indique au navigateur qu'il doit interpréter la page en mode (presque) standard et donc adopter le modèle de boîte standard .

[Bisûnûrs]

En fait, il y a une différence de compréhension des margin et padding chez IE.
Chez Firefox, la largeur inclut les margin et padding tandis que IE ajoute ces px de padding et margin à la largeur donnée ce qui explique que "ça dépasse" avec IE (je pense que c'est le seul navigateur comme ça).

Et c'est l'inverse .. C'est le modèle de boite Microsoft qui inclut le padding et les border dans la largeur width (ou la très récente propriété/valeur CSS3 box-sizing:border-box;), alors que le modèle de boite défini par le W3C les exclut.

Cf :
http://j-willette.developpez.com/tut...ge=page_1#LI-C