Viennamade: Positionierung top und bottom innerhalb eines div-Elements

Beitrag lesen

Hallo Axel!

Danke für die Antwort, Deine Lösung funktioniert und ich verstehe sie und: nein, sie hilft nicht weiter :-)
Deine Ausführungen zum Problem haben mich verunsichert und ich möchte Dich fragen, wie würdest Du diesen Bildschirm lösen:

_________________________________
 Verweis1 |                                |
 Verweis2 |                                |
 Verweis3 |  Datentabelle mit 3 Spalten    |
 Verweis4 |                                |
          |            und                 |
          |                                |
  _______ |                                |
 |       ||            ca.                 |
 |       ||                                |
 | Bild  ||                                |
 |       ||         15 Zeilen              |
 |       ||                                |
 |       ||                                |
 |_______||________________________________|

Das Layout "muß" so aussehen (Grafiker). Das Bild soll untenbündig mit der Tabelle sein, auf die Einheit Bild & Verweisliste bezog sich meine Frage. Die Tabelle ist eine "echte" Datentabelle.

Leicht wäre es ja, die 1. Tabellenspalte für Bild und Verweisliste zu verwenden, aber wegen der Tabellenlayout-Phobie dachte ich eben an die bottom/top-Lösung.
Hinweis: Die Tabelle ist derart Inhaltsreich, daß sie jedenfalls größer als die Einheit Verweisliste & Bild ist.

Ist es besser, das Bild & die Verweisliste als Tabellenspalte zu machen, oder besser mit div/bottom/top zu arbeiten?

Besten Dank & Grüße
Viennamade

Ich habe ein div. Innerhalb dieses div sollen 2 weitere Platz finden, eines ganz oben, das andere ganz unten.
Wie macht man das korrekt?
Korrekt macht man das, meiner Meinung nach, indem man es lässt. Mein Motto: Löse _nie_, ohne wirklich wichtigen Grund, Elemente aus dem normalen Elementfluss. Findest Du einen wirklich wichtigen Grund dafür, dann denk nochmal intensiv drüber nach ;-)).

So, wie Du es sehen willst, wird es eventuell so gehen:

<div style="position:relative;border:1px blue solid;height:300px;width:200px;">
  <div style="position:absolute;border:1px green solid;top:0px;">geh nach oben!</div>
  <div style="position:absolute;border:1px green solid;bottom:0px;">geh nach unten!</div>
</div>

Erklärung: Bei position:relative orientieren sich Angaben zu top, left, bottom, right am umgebenden Element unter Beachtung des normalen Elementflusses. Nur bei position:absolute orientieren sich diese Angaben absolut am nächsten umgebenden Element, welches nicht normal fließt. Das ist der Grund für das position:relative im umgebenden DIV. Ohne dies wäre das nächste umgebenden Element, welches nicht normal fließt, der BODY.

viele Grüße

Axel