Angegebene Länge überschritten ?

[Niklas1812]

Hallo,

Ich habe ein kleines Problem mit meiner Seite http://dont-cry.de/videos.html es geht um die "gelbe Box" die ist länger als angegeben und ich kann mir das nicht erklären !

#einleitung {    
font-size: 16px;
width: 950px; 
background: #FFEB90;
padding: 10px 10px 10px 10px;
margin: 0px 20px 10px 20px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Eigentlich müsste die Box 950px lang sein doch sie ist 970 (20px breiter als der rest der Seite)

Wenn ich jetzt bei padding: 10px 10px 10px 10px; rechts und links die 10 px wegnehme hat die Box wieder die normale länge aber wieso Ordnet sich der Text nicht den Fehlenden 20px an sonderen die Box wird 20px länger ? Ich habe dem Text keine Breite gegeben!

Hoffe ihr versteht was ich meine gruß Niklas

 

[CPoly]

Wenn ich jetzt bei padding: 10px 10px 10px 10px; rechts und links die 10 px wegnehme hat die Box wieder die normale länge aber wieso Ordnet sich der Text nicht den Fehlenden 20px an sonderen die Box wird 20px länger ?

Weil genau das der Sinn von Padding ist. Entweder du machst width:930px um das auszugleichen, oder viel besser du lässt die width-Angabe weg. Dann hat es automatisch die passende Breite.

Weiterführende Infos: http://www.w3.org/TR/CSS2/box.html