CSS geschachtelte <div> richtig positionieren

[RuL3R]

Hallo, ich versuche gerade eine kleine Webseite zu entwickeln. Die Seite soll auf 1024x768 optimiert und deswegen zentriert sein.

Nun habe ich versucht dein <div> Element zu zentrieren um dort dann die weiteren <div> Elemente unterzubringen. Allerdings positionieren sich die Unterelemente weiterhin am linken Rand. Die Unterelemente sind mit position: absolute positioniert.

Wie kriege ich es hin, dass sich die Position auf das obere <div> Element bezieht?

index.html

.
.
.
        <div id="page">
            <div id="logo">
                Logo
            </div>
            <div id="primnav">
                <a href="privatkunden.xhtml">Privatkunden</a>
            </div>
            <div id="metanav">
                <a href="index.xhtml">Home</a>
            </div>
.
.
.

style.css

* {
margin: 0;
padding: 0;
}


html, body {
    text-align:center;
    height: 100%;
    width: 100%;
}

#page {
    width: 950px;
    height: auto !important;
    height: 100%;
    margin: auto;
    text-align: left;
    min-height: 100%;
    overflow: hidden !important;
    background-color: black;
}

#logo {
    position: relative;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 30px;
    background-color: yellow;
}

#primnav {
    position: relative;
    top: 30px;
    left: 0px;
    width: 950px;
    height: 20px;
    background-color: blue;
}

#metanav {  
    position: relative;
    top: 0px;
    left: 200px;
    width: 750px;
    height: 30px;
    background-color: green;
}

 

[DerEineDa]

Gib dem #page ein "position: relative;" und ändere bei allen Divs dort drin das "relative" zu "absolute".

 

[RuL3R]

Funktioniert. Danke!