Problem mit Centered Div (!)

    Hey,

    Ich redesigne gerade mein Portfolio, und habe ein Problem mit einem Div. Dieses ist gecentered.

    Code
    .center
{
    width:  1050px; border: 30px solid #ffffff; text-align: left; position: absolute; left: 50%; top: 0px; margin-left: -525px; background-color: #ffffff;
}

    In diesem Div(.center) ist ein anderes Div, welches problemlos funktioniert.

    Code
    #footercomment1
{
    width: 150px; height: 100px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #7d6262; position:absolute; left: 0px  
}

    Jedoch tritt ein Fehler auf wenn ich ein anderes Div in das Div(.center) einfüge.

    Code
    .contentdiv
{
    position: absolute; top: 150px; text-align: left; font-size: 24px;
}

    Der Fehler wird offensichtlich durch position absolute ausgelöst. (Jedoch ist dieser Tag auch im problemlosen div vorhanden.)

    Hier das genannte Problem:

    Seite ohne Fehler und ohne postion Tag in Div(.contentdiv)


    Seite mit Fehler und mit position Tag in Div(.contentdiv)

    Ich bin ratlos wie ich das Problem lösen könnte....

    Ich würde mich über eure Hilfe freuen.

    Warum nicht einfach Relativ positionieren?


    Absolut Positionierte Inhalte können andere Elemente nicht beeinflussen.

    Ansonsten, wie schon Dodo schrieb, beschreib uns dein Ziel etwas genauer.

    Allgemeines Ziel des Unterfanges ist:
    - Ein horizontal Zentriertes Div, welches vertikal die gesamte Seite umfasst (oben bis unten) zu erstellen.
    - Innerhalb des Div-Elementes sollen andere Div Element mit position: absolute positioniert werden können.


    Meine Bisherigen Schritte:

    1. Ein Div class="center" mit

    Code
    position: absolute; left: 50%; top: 0px; margin-left: -525px; width:  1050px;

    zu zentrieren

    2. Andere Div-Elemente mit position: absolute in das Div in Punkt 1. einzufügen.

    Der Fehler: Das Div in Punkt 1. umfasste nicht mehr vertikal die Gesamte Seite (oben bis unten) wenn Schritt 2. ausgeführt wurde.

    (konkreter: Beim im Anfangspost genannten Div mit id="footercomment1" passiert kein Fehler wenn es eingefügt ist, jedoch beim im Anfangspost genannten Div mit class="contentdiv" erscheint besagter Fehler)

    Danke im Voraus für eure Hilfe.

    Das im Footer funktioniert, weil dieser (div.footer) eine Höhe hat - und eben nicht absolut positioniert wurde. Die Elemente darin sind egal.
    Wenn die Elemente rausragen würden, würdest du das selbe Problem haben (z.B. #footercomment1 { height: 2000px; } )


    Warum testest du nicht das, was ich dir oben geschrieben hab?

    Zitat von Grevas

    Das im Footer funktioniert, weil dieser (div.footer) eine Höhe hat - und eben nicht absolut positioniert wurde. Die Elemente darin sind egal.
    Wenn die Elemente rausragen würden, würdest du das selbe Problem haben (z.B. #footercomment1 { height: 2000px; } )


    Warum testest du nicht das, was ich dir oben geschrieben hab?

    Wahrlich nicht schlecht., die Div-Elemente relativ zu positionieren. Jedoch ergibt sich ein weiteres Problem:

    Wenn ich bei .contentdiv bei top: eine größere Zahl eintrage z.B. 200px dann füllt das .center Div nicht mehr die volle vertikale Fläche aus.


    Beispiel:

    http://www.suicideclown.com/index2.html

    So weit so gut und danke für die bisherige Hilfe.

    ....


    aber: Kleiner Fehler, wenn ich margin-top und position relative verwende werden die 3 Farbigen Boxen unten an der Seite (#footercomment) nichtmehr richtig dargetstellt.

    Ich werde den position tag jetzt einfach weglassen.

    Danke für eure und insbesonere deine Hilfe.