Positionierung von Elementen

Daimond · 12.02.2013

Ich muss für die Schule ne HTML-Datei mit Hilfe von CSS erstellen. Nur komme ich nicht wirklich gut mit CSS klar und verstehe auch nicht warum mir in meinem Browser nur ein von drei Texten angezeigt wird. Ich hoffe mir kann jemand mal helfen den Fehler zu finden.
Ich dachte erst die Positionierung wäre falsch deshalb habe ich die drei Elemente so gesetzt das sie sich eigentlich nicht schneiden dürften, und Kante an Kante Liegen müsste.
Die relevanten Zeilen aus HTML:

HTML:

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="Top"> Mein erster Test </div>
<div id="Sidebar"> Mein zweiter Test </div>
<div id="Mid"> Mein dritter Test </div>

Die relevanten Zeilen aus CSS:

Code:

#Top
 {
border-color: #d5c99f;
border-style: solid;
border-width: 50px;
border-height: 50px;
height: 50px;
width: 50px;
margin: auto;
position: absolute;
border-size: 1;
}

#Sidebar {
border-color: #d5c99f;
border-style: solid;
border-width: 100px;
border-height: 100px;
height: 100px;
width: 100px;
margin: auto;
position: absolute;
border-size: 1;
}
#Mid {
border-color: #d5c99f;
border-style: solid;
border-width: 200px;
border-height: 200px;
height: 200px;
width: 200px;
margin: auto;
position: absolute;
border-size: 1;
}

developr · 27.02.2013

Mit "position:absolute" werden alle DIVs übereinander gelegt, wenn du keine weitere Positionsangaben machst (top,left,right oder/und bottom).

igestalten · 02.03.2013

Daimond schrieb:
...
#Mid {
border-color: #d5c99f;
border-style: solid;
border-width: 200px;
border-height: 200px;
height: 200px;
width: 200px;
margin: auto;
position: absolute;
border-size: 1;
}

[/CODE]

"border-size" und "border-height" sind übrigens keine gültigen CSS Eigenschaften!
http://www.w3schools.com/css/css_border.asp