Css : Box Model

Pour faire suite à des interprétations de css différentes entre IE6 et Firefox, je m’aperçois (avec effroi) que j’ai mal interprété les recommandations du W3c.

Explications :

Si l’on observe les 2 éléments suivants :

<div style="width: 200px;">
<div style="width: 100%; padding-left : 50px; background : blue;">avec padding</div>
</div>

et
<div style="width: 200px;">
<div style="width: 100%; background : red;">sans padding</div>
</div>

On pourrait penser que ces 2 éléments ont la même taille de 200 pixels de large, mais il n’en est rien, la preuve :

avec padding
sans padding

(le premier élément à une longueur de 250 pixels de large,
le second 200 pixels seulement.)

Pourquoi ces 2 éléments n’ont-ils pas la même taille ?
On trouve la réponse dans le « box model » css du W3c :

« La taille des éléments préciser par width n’inclut, ni les marges (margin), ni les bords (border), ni les espaces intérieurs (padding).

Quelques exemples de layout fluides après ca :

http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :