Padding verschiebt Inhalt der rechten Spalte

[Yann]

Hallo!

Ich bin nah am Verzweifeln... irgendwie habe ich einen Wurm in mein Stylesheet bekommen und ich bin ziemlich sicher, jemand von euch wird den Fehler sofort erkennen - aber ich seh den Wald vor lauter Bäumen nicht.

Es geht um folgende Baustelle: http://www.im-treibsand.net/index.php/43.htm
Mein Problem ist: die rechte Spalte reagiert nicht so, wie ich es erwarte, auf die padding-Anweisung. Ich stelle mir eigentlich vor, dass ich links den #main mit fester Breite und definiertem Innenabstand habe, und daneben genauso den #right. Wenn ich jedoch padding-right im #right einsetze, schiebt der sich lediglich entsprechend nach links... mit Firebug lässt sich das, denke ich, ganz gut nachvollziehen - aber warum passiert das?

Ich bin für jeden Tipp sehr dankbar! Es ist besimmt was total Offensichtliches und Peinliches.

Viele liebe Grüße an euch alle und frohes Coden!
Yann.

[Bankai]

Hi Yann,
also zu erst würde ich die rechte Spalte vom Aufbau nach unten tuen.

#main {
    color: #C8A372;
    float: left;
    padding: 10px 15px 0 15px;
    width: 650px;
}

#right {
    background-color: #0D0000;
    float: right;
    padding: 10px 10px 0 10px;
    width: 250px;
}

(Nur so als Tipp ^^ padding: oben rechts unten links

Und zum Punkt wieso, dein main ist sowieso zu breit und dadurch das du die den #righ-div Breiter machst verschiebt es das ganze natürlich nach rechts, denn der Padding zählt zum Inhalt mit. Somit wenn du eine box mit 100px x 100px und ein padding 10px hast du eine box von 120px x 120px ^^

Hoffe das war das Problem? ^^

Grüße Bankai

[Yann]

Problem erkannt: Box-Modell-Failure... ich habe offensichtlich GAR NICHTS verstanden.
Diese Grafik hilft enorm: http://de.selfhtml.org/css/formate/box_modell.htm

Danke trotzdem für's Lesen! :]

Gute Nacht,
Yann.

[Yann]

@Bankai: Du hast dir ja total viel Arbeit gemacht! o.O Danke vielmals dafür!!! Den Tipp mit der Reihenfolge werde ich beachten, der ist Gold wert. Das andere Problem habe ich in genau dieser Minute selbst erkannt.

Vielen lieben Dank, gute Nacht!

[Bankai]

Noch als Tipp: Finde die www.css4you.de Seite ganz gut,
hier finde ich das Box-Model von den Bereichen besser untermalt: http://www.css4you.de/wsboxmodell/index.html