Kalle: div problem :-/

Hallo!

Ich möchte eine <div> welches in einem <div> mit eine Höhe von 100px ist rechts unten in die Ecke bekommen.
Geht das? Wenn wie?

mfg Kalle

  1. Hallo.

    Ich möchte eine <div> welches in einem <div> mit eine Höhe von 100px ist rechts unten in die Ecke bekommen.

    Ein klassischer Fall für "position". Das CSS-Kapitel verrät dir mehr zu dieser Eigenschaft.
    MfG, at

    1. Moin!

      Ich habe es bereits mit position versucht nur und die Postition irgentwie auf das Elternelement zu beziehen aber ich bekomme es nicht hin.
      Kannst du mir sagen wie genau ich das bewerkstellige?

      MfG, Kalle :D

      1. Hallo!

        Ich habe es bereits mit position versucht nur und die Postition irgentwie auf das Elternelement zu beziehen aber ich bekomme es nicht hin.

        Du willst, daß

        • der rechte Rand des div-Element zum rechten Rand des Viewports 0 Entfernung hat.
        • und daß der untere Rand des div-Elements zum unteren Rand des Vieports 0 Entfernung hat.

        ;-) Beste Grüße
        Viennamade

        1. Hallo!

          Ich möchte eine <div> welches in einem <div> mit eine Höhe von 100px ist rechts unten in die Ecke bekommen.

          Du willst, daß

          • der rechte Rand des div-Element zum rechten Rand des Viewports 0 Entfernung hat.
          • und daß der untere Rand des div-Elements zum unteren Rand des Vieports 0 Entfernung hat.

          Meine Lösung ist falsch, habe überlesen, daß das zu positionierende div in einem anderen drinnen steckt. Tut mir leid.

          Beste Grüße
          Viennamade

      2. Hallo.

        Ich habe es bereits mit position versucht nur und die Postition irgentwie auf das Elternelement zu beziehen aber ich bekomme es nicht hin.

        Das Elternelement muss auch über eine "position"-Angabe verfügen, und zwar eine, die vom Normalwert "static" abweicht.
        MfG, at

        1. Oh!

          Meine Seite ist so schön ohne position aufgebaut... :-/
          Gibts keine andere Möglichkeit?

          Kalle

          1. Hallo.

            Meine Seite ist so schön ohne position aufgebaut... :-/

            Durch "position: relative;" ohne weitere Angaben zur Ausrichtung positionierst du ja auch nichts.

            Gibts keine andere Möglichkeit?

            Das beobachtete Verhalten ist absolut normgerecht. Mein Ratschlag ist also kein Workaround, sondern die standardmäßige Vorgehensweise.
            MfG, at

            1. Mhhh,
              Ich verstehe nicht welche Elemente welche Attribute haben sollen.

              Es soll so aussehen:
              +-----+---------------------------------------+
              | bar |                                       |
              |  1  |                    +------------------+
              +-----+                    | bar 2            |
              +--------------------------+------------------+

              Und der code sieht in etwa so aus:
              <body>
               <div id="foo1">
                <div id="foo2">
                 <div id="bar1"></div>
                 <div id="bar2">soll nach rechts unten</div>
                </div>
               </div>
               <!-- noch ein paar andere <div> die dem fluss folgen sollen -->
              </body>

              MfG, Kalle

              1. Hallo!

                Es soll so aussehen:
                +-----+---------------------------------------+
                | bar |                                       |
                |  1  |                    +------------------+
                +-----+                    | bar 2            |
                +--------------------------+------------------+

                <body>
                <div id="foo1">
                  <div id="foo2">
                   <div id="bar1">  t  e  s  t </div>
                   <div id="bar2">soll nach rechts unten</div>
                  </div>
                </div>
                <!-- noch ein paar andere <div> die dem fluss folgen sollen -->
                </body>

                #foo1 {position:relative;border:1px red solid;height:100px;}
                #foo2 {border:1px blue solid;}
                #bar1 {border:1px black dotted;}
                #bar2 {position:absolute;border:1px green dotted;bottom:0;right:0;}

                ? & Beste Grüße
                Viennamade