Div verschiebt sich bei Padding!

[psylangos]

Hallo liebe Leute!

Ich bin ganz neu hier und auch ganz neu in der HTML & CSS Welt und habe ein Problem!
Bin gerade dabei eine Homepage zu erstrellen (nichts ernstes)..

Hier mal der Code:

#content
{
background-color: #00FF00;
height: 450px;
width: 570px;
margin-top: 6px;
margin-bottom: 6px;
border-radius: 10px;
-mox-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
float: left;


}


#sidebar
{
background-color: #008000;
height: 450px;
width: 324px;
float: right;
margin-top: 6px;
margin-left: 6px;
margin-bottom: 6px;
border-radius: 10px;
-mox-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;

Mein Problem:

mit dem jetztigen Code hab ich einen Content Bereich und einen Sidebar doch wenn ich nun den Text innerhalb dieser beiden mit padding-left und padding-right in die mitte rücke verschiebt sich mein Sidebar wieder nach unten!

Kann man margin und padding gleichzeitig verwenden? müsste ja eig. gehen da margin ja für außen und padding für innen ist?

Bitte um Hilfe

 

[Mark]

Klar kannst du margin und padding gleichzeitig verwenden, aber ich vermute du solltest einfach mal "mox" in "moz" ändern.

 

[psylangos]

danke für den Tipp, da ich aber sowieso kein Firefox verwende hilfts leider nix.. hat nix geändert :( kann es sein dass es durch mein clear weiter unten nicht funkt?

wenn ichs richtig sehe, wird die ganze box dadurch größer..

 

[psylangos]

okay hab den Fehler gefunden!

kann mir nur jemand sagen ob das ein Denkfehler war oder ob ich jetzt eine unschöne Variante gewählt habe!

Der Fehler war, mein Padding hat die Breite des divs verändert, somit musste ich die padding px der standard breite abziehen.. ist das normal so?

 

[Banana_Jones]

Ja, das ist normal so. Per Definition addiert sich das Padding zur Breite/Höhe des Elements.

 

[scbawik]

Mit der CSS3-Eigenschaft 'box-sizing' kannst du jedoch auch die Breite so für ein Element festlegen, dass die (gesamte) Breite - also mit Rahmen und Padding - den angegebenen Wert nicht überschreitet. So z.B.:

.element {
box-sizing: border-box;
width: 200px;
padding-left:30px;
padding-right:20px;
border: 10px solid #CCC;
}

Leider wird diese Eigenschaft soweit ich weiß nur von recht aktuellen Browsern unterstützt und ist noch nicht W3C-Konform. Aber bis es soweit ist darf man sowieso noch Jahrtausende warten...

 

[threadi]

Der Fehler war, mein Padding hat die Breite des divs verändert, somit musste ich die padding px der standard breite abziehen.. ist das normal so?

Ja, ist normal. Hierbei wird das padding zur Breite und Höhe addiert. Wenn Du das (auch für Browser ohne o.g. Unterstützung) haben willst, solltest Du der umgebenden Box die Breite und einer darin liegenden Box das padding geben. Beides zusammen bei einem Element führt zur Addition.