Martin Pito: Absoluten DIV-Container anhand seines rechten Randes ausrichten

Hallo,
ich habe folgendes Problem und bisher erfolglos nach einer Lösung gesucht.

Ich möchte einen DIV-Container (position:absolute) anhand seines rechten Randes ausrichten. Die Rechte Seite des DIV-Containers soll etwa bei 100px im Browser ausgerichtet werden. Für DIV-Boxen mit relativer Position gibt es viele Lösungen, aber wie funktioniert es bei einer absoluten DIV-Box.

Folgendes habe ich u.a. schon erfolglos ausprobiert:
right:100px
marginRight:100px
usw...

Hat jemand eine Lösung?
Martin

  1. Hallo Martin,

    marginRight:100px

    muss so geschrieben werden…
    margin-right: 100px;

    #test {  
      position: absolute;  
      right: 100px;  
      top: 20px;  
      width: 300px;  
      height: 300px;  
      border: 1px solid rgb(220, 20, 60);  
    }
    

    <div id="test"></div>

    Das sollte reichen. Der border ist nur zur Hilfe gedacht.

    1. #test {

      position: absolute;
        right: 100px;
        top: 20px;
        width: 300px;
        height: 300px;
        border: 1px solid rgb(220, 20, 60);
      }

      
      >   
      > `<div id="test"></div>`{:.language-html}  
      >   
      > Das sollte reichen. Der border ist nur zur Hilfe gedacht.  
        
      Mit diesen Angaben wird der rechte Rand des DIV-Containers 100px vom rechten Browserrand positioniert. Gibt es eine einfache Lösung ihn ausgehend vom linken Browserrand zu positionieren?  
        
      Notfalls muss ich die Breite des DIVS per js ermitteln, aber das wäre umständlich.  
        
      
      
      1. Hi,

        Gibt es eine einfache Lösung ihn ausgehend vom linken Browserrand zu positionieren?

        Nur, wenn er eine feste Breite hat in einer „absoluten“ Einheit (nicht Prozent) – dann kannst du ihn mit left:100px positionieren, und mit einem negativen margin-left entsprechend seiner Breite wieder rüber ziehen.

        MfG ChrisB

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
        1. Gibt es eine einfache Lösung ihn ausgehend vom linken Browserrand zu positionieren?

          Nur, wenn er eine feste Breite hat in einer „absoluten“ Einheit (nicht Prozent) – dann kannst du ihn mit left:100px positionieren, und mit einem negativen margin-left entsprechend seiner Breite wieder rüber ziehen.

          Er hat leider keine feste Breite, da der Inhalt dynamisch ist.

        2. Hi

          Nur, wenn er eine feste Breite hat in einer „absoluten“ Einheit (nicht Prozent) – dann kannst du ihn mit left:100px positionieren, und mit einem negativen margin-left entsprechend seiner Breite wieder rüber ziehen.

          soweit ich weiß, bezieht sich absolute immer auf das Elternelement. In diesem Fall anscheinend der Browser.
          D.h. mit left und top, kann man die obere linke Ecke festlegen.

          Wenn du die Box mittig zentrieren möchtest, gehts natürlich einfach, wenn man die Breite hat:

          left:50%;  
          left-margin:-xx px;  
          /*wobei xx die 1/2 der Breite ist */
          

          Viele Grüße aus LA

          --
          ralphi
          1. Om nah hoo pez nyeetz, ralphi!

            soweit ich weiß, bezieht sich absolute immer auf das Elternelement.

            Auf das „jüngste“ derjenigen Ahn-Elemente, das eine von static abweichende Positionierung hat. http://selfhtml.apsel-mv.de/position/position.html

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wachs und Wachstube.

      2. Mit diesen Angaben wird der rechte Rand des DIV-Containers 100px vom rechten Browserrand positioniert. Gibt es eine einfache Lösung ihn ausgehend vom linken Browserrand zu positionieren?

        Spontan würde ich es mit:
        right: calc(100% - 100px);
        versuchen.

  2. Ich möchte einen DIV-Container (position:absolute) anhand seines rechten Randes ausrichten. Die Rechte Seite des DIV-Containers soll etwa bei 100px im Browser ausgerichtet werden.

    Ich habe es jetzt umständlich per js gelöst, indem ich die Breite der aktuellen DIV-Box ausmesse:

    var divbreite=document.getElementById('innererKasten').offsetWidth;

    1. Om nah hoo pez nyeetz, Martin Pito!

      Ich habe es jetzt umständlich per js gelöst,

      Der Vorschlag von TSO tut es nicht?

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rat und Ratatouille.