rainer ep: problem mit positionierung im opera

Hallo,

ich hab ein kleines Problem mit der Positionierung zweier (kinder-)divs innerhalb eines anderen (eltern-)divs.

das ganze sieht etwa so aus:

<div class="eltern">
  <div class="kind1">ksjdfksdj</div>
  <div class="kind2">slkjdnflksj</div>
</div>

nun soll kind1 rechts oben und kind2 rechts unten innerhalb des ElternDivs positioniert werden:

.eltern{
position:relative;
width:300px;
height:200px;
}

.kind1{
position:absolute;
right:0px;
top:0px;
}

.kind2{
position:absolute;
right:0px;
bottom:0px;
}

das ganze funktioniert im IE und Firefox ohne Probleme, allerdings im Opera nicht, da werden die Kinder am rechten Bildrand, und nicht mehr innerhalb des ElternDivs angezeigt.

Zwar würde die Positionierung klappen, wenn das ElternDiv position: absolute bekommt, jedoch ist das dann nicht mehr an der richtigen stelle.

Zweite Möglichkeit, wäre die Kinder per position relative zu verschieben, jedoch sind die Div Inhalte unterschiedlich groß, so daß im ungünstigen Fall der Inhalt von Kind1 so groß ist, dass Kind2 nach unten rausgeschoben würde...

hat jemand eine idee?

  1. Hallo,

    Ich habe gute Erfahrungen damit gemacht, die divs mit margin und float zu positionieren. Das ist meine Idee:

    .eltern{

    position:relative;
    width:300px;
    height:200px;
    }

    .kind1{
    margin-right:0px;
    margin-top:0px;

    float:left;

    }

    .kind2{
    margin-left:150px;
    margin-top:100px;

    float:right;
       text-align:left;

    }

    Der html text sollte dann so aussehen:

    <div class="eltern">

    <div class="kind2">slkjdnflksj</div>
      <div class="kind1">ksjdfksdj</div>
    </div>

    Bedingt allerdings, dass Höhe und Breite nicht überschritten werden dürfen, sonst schieben sich die Container durcheinander.

    mfg

    Anschinsan

    1. Hallo,

      Ich habe gute Erfahrungen damit gemacht, die divs mit margin und float zu positionieren. Das ist meine Idee:

      Bedingt allerdings, dass Höhe und Breite nicht überschritten werden dürfen, sonst schieben sich die Container durcheinander.

      Hab damit ein bisschen rumprobiert, aber wie du schon angedeutet hast, ich muss mich auf irgendwelche width und height werte festlegen... das möchte ich eigentlich nicht, aber wenns nicht anders geht...

      die positinierung wäre schon das optimum, wenn der opera sie doch genauso machen würde;
      immerhin heißt es ja (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position): absolute ist absolute zum elternElement und nicht zum body, da steht nichts davon, dass das elternelement auch absolute positioniert sein muss; muss es wohl aber (im opera)...

      1. Willkommen im ganz normalen Browserwahnsinn ;-)

        Vielleicht kann man dir im Forum von CSS4You noch bessere Tipps geben. Eigentlich müsste es schon möglich sein, die Container auch mit position richtig zu positionieren.

        http://www.css4you.de/

        mfg

        Anschinsan

        1. grad eben hab ich rausgefunden worans liegt: mit dem opera klappt es eigentlich auch normal... das problem ist, das mein elternElement noch float:right hat, und genau daran liegts:
          ist das weg, werden die Kinder im ElternDiv richtig positioniert, ist es da, werden sie im body positiniert;

          allerdings muss das ElternDiv diese eigenschaft haben, weil es selbst etwas geschachtelt ist.
          naja mal gucken, was man da jetzt machen kann...

          1. hi,

            grad eben hab ich rausgefunden worans liegt: mit dem opera klappt es eigentlich auch normal... das problem ist, das mein elternElement noch float:right hat, und genau daran liegts:
            ist das weg, werden die Kinder im ElternDiv richtig positioniert, ist es da, werden sie im body positiniert;

            opera scheint generell ein problem zu haben, wenn die lage des relativ positionierten vorfahrenelements noch anderweitig beeinflusst wird - dein bug ist ja dem sehr ähnlich, den in vor einiger zeit in verbindung mit text-align und relativer/absoluter positionierung beobachtet habe, http://forum.de.selfhtml.org/archiv/2004/11/t93983/

            gruß,
            wahsaga

            --
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."