padding und margin problem beim text in einer div box!

[SkullCrusher]

hallo

ich bekomme ein problem mit margin und padding!

ich habe also div boxen die untereinander liegen. Um diese 3 boxen herum habe ich eine vierte um diese einfach zu zentrieren. soweit so gut...

wenn ich nun aber in der mittleren box (#content) versuch meinen inhalt zum rand der css box (#content) mit einem abstand zu versehen zerreist es das ganze layout!

Es vergrößert sich die #content box zum beispiel nach rechts oder bei abstand nach oben (top) vergrößert sich die box nach unten um den jeweils angegebenen wert!

... zur veranschaulichung der html-datei (laut validator valid):

Code: Alles auswählen

<div id="ausen">
<!-- Header öffnen -->
<div id="header">
</div>
<!-- Content öffnen -->
<div id="content">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>


</div>
<!-- Footer öffnen -->
<div id="footer">
</div>
</div>

und nachfolgend noch der code der css-datei:

Code: Alles auswählen

body {
		background-color:#000000;
        scrollbar-3dlight-color:#808080;
		scrollbar-darkshadow-color:#808080;
		scrollbar-highlight-color:#000000;
		scrollbar-shadow-color:#000000;
		scrollbar-arrow-color:#ff0000;
		scrollbar-base-color:#000000;
		scrollbar-face-color:#000000;
		scrollbar-track-color:#000000;
        }
p {
		color:#ffffff;
}
a:link { color:#AAAAAA; text-decoration:none; }
a:visited { color:#555555; text-decoration:none;}
a:active { color:#3F3F3F; text-decoration:none;}
a:hover { color:#000000; text-decoration:none;}
}
#ausen {
		position: absolute;
		width:800px;
		height:506px;
		position:absolute;
		left:50%;
		margin-left:-400px;
		top:50%;
		margin-top:-253px;
		background-image:url(../img/bg.jpg);
		background-attachment:fixed;
}
#header {
		position: relative;
		width:800px;
		height:50px;
		border-top-width:1px;
		border-top-style:solid;
		border-top-color:#808080;
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#808080;
		border-right-width:1px;
		border-right-style:solid;
		border-right-color:#808080;
				  }
#content {
		position: relative;
		width:800px;
		height:450px;
		overflow:auto;
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#808080;
		border-right-width:1px;
		border-right-style:solid;
		border-right-color:#808080;
		border-bottom-width:1px;
		border-bottom-style:solid;
		border-bottom-color:#808080;
		}
#footer {
		position: relative;
		width:800px;
		height:5px;
		background-color:#000000;
}

ich hoffe es war diesmal verständlich ausgedrückt was ich meinte!

vielen dank an alle helfenden

grüße
SkullCrusher

PS: wenn noch jemand vorschläge hat wie ich den ganzen krims krams anderweitig verbessern kann bin ich gerne offen!

[Blutgerinsel]

Hab das nicht näher angeschaut aber vermutlich bist du dir nicht im klaren was padding, margin, border sich auf die Breite auswirken und dementsprechend die Pixel errechnet werden müssen.

[[FAS]Cyrix]

Damit dürfte dein Problem gelöst sein:

Code: Alles auswählen

#header {
---------[ ändern ]---------
      position: absolute;
-------[ hinzufügen ]-------
      top: 0px;
      left: 0px;
}
#content {
---------[ ändern ]---------
      position: absolute;
-------[ hinzufügen ]-------
      top: 50px;
      left: 0px;
}
#footer {
---------[ ändern ]---------
      position: relative;
-------[ hinzufügen ]-------
      top: 500px;
      left;
}