Hauke: Div am unteren Rand ausrichten

Hi,

habe schon viele Beiträge gelesen, bei allen scheint es irgendwann zu klappen, bei mir aber nicht :-)

Ich habe es jetzt auf das minimale reduziert. Alle CSS Files entfernt und die Divs mit style eingestellt, damit man das einfach per copy & paste testen kann.

Ich habe ein Div mit einem roten Rahmen und ein kleineres Div mit einem blauen Rahmen in dem "roten" Div. Das "blaue" Div hat height:400px, so dass das rote auch mit "wächst". Nun möchte ich einen Text in dem blauen Div unten in der Mitte haben. Wie bekomme ich das hin? Ich habe mit position, align, verticle-align, bottom und padding schon fast alle Kombinationen probiert. Hier das Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  </head>

<body>
 <div style="width:800px; border:1px solid red; float:left">
     <div style="width:400px; height:400px; border:2px solid blue; float: left">
   <div style="position:absolute; bottom: 0px">Text</div>
        </div>
    </div>
</body>
</html>

Ich danke schonmal,
Hauke

  1. hi,

    Nun möchte ich einen Text in dem blauen Div unten in der Mitte haben. Wie bekomme ich das hin? Ich habe mit position, align, verticle-align, bottom und padding schon fast alle Kombinationen probiert.

    Und worauf sich absolute Positionierung relativ bezieht, hast du dir auch schon klar gemacht?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi,

      wie gesagt, ich habe schon rum probiert bis zum geht nicht mehr ;-) Das was ich hier geposted habe, war das kürzeste und eigentlich auch übersichtlichste Beispiel.

      Bzgl Position ist mir schon klar das das so nicht gehen kann. Daher wäre es für mich logischer mit align auto 0px 0px 0px zu arbeiten um es nach unten zu bekommen aber das geht auch nicht.

      1. hi,

        Bzgl Position ist mir schon klar das das so nicht gehen kann.

        Mein Hinweis sollte dir eigentlich eine(!) Möglichkeit aufzeigen, wie es "gehen" kann.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
    2. Hi,

      alles schon probiert, wenn du position:relative meinst. Wenn ich position:relative und bottom:0px mache, dann stehts links oben im div. ohne bottom 0px auch.

      1. Hallo Hauke

        alles schon probiert, wenn du position:relative meinst. Wenn ich position:relative und bottom:0px mache, dann stehts links oben im div. ohne bottom 0px auch.

        Und worauf sich absolute Positionierung relativ bezieht, ...

        ^^^^^^^^                        ^^^^^^^

        Lies doch mal einfach in SELFHTML nach.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!