28220 sujets

CSS et mise en forme, CSS3

[Résolu] Les modèles de boites

Ca fait un petit moment que les padding me chagrinent.
Avant, j'ai l'impression de ne pas avoir eu de problèmes, mais depuis quelques temps, si je vais une DIV qui est censée avoir une largeur égale à celle de la fenêtre, à qui je met 20px de padding a gauche et à droite, se met à déborder... 

div {
width: 100%;
padding: 0 20px;
background:#FFCC00;
}


Je dois oublier quelque chose non ? Smiley sweatdrop
Modifié par Sylvain (19 Jul 2005 - 15:51)
Merci pour ta réponse ^^

Je connais, l'ennui, c'est que ca le fait sous IE et Firefox... Smiley decu

Voici le code complet d'une page de test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><title>Test</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-15" />
<style type="text/css">
<!--
div {
width: 100%;
padding: 0 20px;
background:#FFCC00;
}

//-->
</style></head><body>

<div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>

</body></html>
Avec le modèle de boîte standard, le comportement que tu observes est entièrement normal : la largeur de la boite "width" est en fait la largeur de son contenu, à laquelle viennent s'ajouter les padding à droite et à gauche, qui sont responsables du débordement. Smiley cligne
Le modèle de boîte CSS de Microsoft, lui, inclue le padding "dans le width".

Pour éviter les problèmes avec ces deux modèles de boîte, tu peux soit éviter de spécifier les propriété width & padding d'une même boîte, ou utiliser des hacks (berk!) pour faire comprendre aux navigateurs comme IE comment afficher la boiboîte comme tu le souhaites. Smiley smile

Des liens intéressants sur le problème :
- Sur Openweb : L'article de Laurent Denis sur les modèles de boîtes CSS
- La FAQ du forum Alsacréation : Mon bloc n'a pas la même taille sur Internet Explorer que sur les autres navigateurs. Pourquoi ? Smiley lol

Bonne chance Smiley smile

Edit : Oups... la prochaine fois je recharge la page avant de poster. Smiley confused
Modifié par gr3mi (19 Jul 2005 - 15:48)
le modèle d'internet explorer est plus pratique dans mon cas ^^

merci pour ces réponses, j'avais inversé les deux en fait ^^)

je vais mettre deux div les unes dans les autres, et voilà !
Sujet clos
Aller à