zwei divs (relativ und absolut) an deren rechten Rand ausrichten

[Christian]

Hallo, ich habe zwei divs. Das absolute div möchte ich am rechten Rand des äußeren (relativen) DIVs positionieren/ ausrichten. Kennt jemand mit CSS oder JS eine einfache Möglichkeit? Mit JS ist das ziemlich schwierig, da beide DIVs eine dynamische Breite haben und ich immer nur anhand des linken Randes ausrichten kann.

<div style="width:70%;position:relative">

<div style="width:50%;position:absolute">Inhalt</div>

</div>

Vielen Dank Christian

[Matthias Apsel]

Hallo Christian,

CSS/Eigenschaften/Positionierung/right

Bis demnächst
Matthias

[Christian]

Mit “right“ wird der LINKE Rand des absoluten Divs (von der rechten Seite des Elternelements) ausgerichtet. Ich will das absolute DIV aber anhand seines rechten Randes ausrichten. Der rechte Rand beider DIVs muss quasi bündig sein.

[Rolf b]

Hallo Christian,

Du irrst. Die Eigenschaft right bestimmt den Abstand des rechten Randes zum rechten Rand des Containers.

Beispiel inclusive Padding und box-sizing (siehe mein Posting unten).

Rolf

[Rolf b]

Hallo Christian,

früher war es mal schwieriger, und gerade der IE hat gespuckt, aber heute ist es problemlos möglich, eine Box mit zwei von drei Werten aus top/bottom/height und zwei von drei Werten aus left/right/width in Position und Größe festzulegen.

Deswegen: Jede dieser drei Zeilen

   left:50%; width:50%;  
   left:50%; right:0;  
   width:50%; right:0;  

hat den gewünschten Effekt - WENN NICHT BORDER ODER PADDING IM SPIEL IST. Wenn doch, hättest Du früher Border und Padding herausrechnen müssen. Heute kannst Du dem inneren DIV mit box-sizing:border-box das Boxmodell des IE Quirksmode geben und dann sind Border und Padding innerhalb der angegebenen Maße.

Was machst Du übrigens mit dem Bereich des äußeren DIV, der vom absolut positionierten DIV überlagert wird? Ist das ok? Oder bekommst Du nun noch das Problem, wie Du Content aus diesem Bereich fernhältst? Mit anderen Worten: Für welches Problem hast Du deine DIV/DIV Lösung konzipiert? Es besteht immer die Möglichkeit, dass die Lösung nicht optimal ist.

Rolf