CSS: vertical-align: bottom

[pekka]

So!
An alle "Tabellen-sind-Out"-Vertreter. Wie mache ich folgendes in CSS?

Ich habe ein DIV mit einer festen Breite und Höhe.
Darin steckt 1. ein unsichtbares weiteres DIV, das später via Scripaculous nach links ausgefahren wird, und 2. ein h1-Element.
Das h1-Element soll nun am unteren Rand des DIVs kleben statt am oberen.
Es kann 2-Zeilig werden, das Arbeiten mit padding-top ist also ausgeschlossen.
Vertical-align: bottom funktioniert wie immer nicht.

Wie mache ich das, ohne auf eine Tabelle zurückzugreifen?

[TobiaZ]

Vertical-align: bottom funktioniert wie immer nicht. Wie mache ich das, ohne auf eine Tabelle zurückzugreifen?

position:absolute/relative (habs grad nicht aufm Schirm) mit bottom:0?

[Kropff]

Vertical-align: bottom funktioniert wie immer nicht.

vertical-align gilt auch nur für inline-elemente. und was ist eine überschrift? mal daran gedacht, beim unsichtbaren div mit visibility zu arbeiten? dann wird der platz reserviert und du kannst bei besagten div mit margin-bottom arbeiten.

peter

[pekka]

Original geschrieben von TobiaZ
position:absolute/relative (habs grad nicht aufm Schirm) mit bottom:0?

Das ginge nur, wenn das Element selbst absolute positioniert wäre, das darf in dem Kontext nicht sein.

[pekka]

Original geschrieben von Kropff
vertical-align gilt auch nur für inline-elemente. und was ist eine überschrift? mal daran gedacht, beim unsichtbaren div mit visibility zu arbeiten? dann wird der platz reserviert und du kannst bei besagten div mit margin-bottom arbeiten.

peter

Das unsichtbare DIV ist glaube ich nicht das Problem, nur die Positionierung des h1. Da dieses bei mehreren Knöpfen unterschiedlich hoch sein kann (1-2zeilig), kann ich es nicht fest positionieren.
Der Firefox 3 ignoriert das vertical-align, auch wenn ich das h1 als display:inline setze!
Was mache ich falsch?

[Kropff]

Was mache ich falsch?

dich wie jhaustein zu benehmen?

poste mal code oder noch besser ein online-beispiel. ich muss das sehen, um es beurteieln zu können.

peter

[eintrachtemil]

Meiner Meinung funktioniert das vertikale Ausrichtung ohne Tabellen zu gut wie gar nicht. Das ist eines der größten Schwachstellen von CSS-basierten Layouts.

Einigermaßen korrekt funktioniert die CSS-Eigenschaft vertical-align sowieso nur bei Tabellenzellen.

Der einzigste Workauround ist, das äußere DIV mit einem "display:table-cell" zu versehen. Dann versteht zumindest der Firefox 3 das vertical-align korrekt.

IE7 packt es aber nicht, Firefox < 2 habe ich nicht getestet.

[asp2php]

Original geschrieben von Kropff
dich wie jhaustein zu benehmen?

Autsch

[pekka]

poste mal code oder noch besser ein online-beispiel. ich muss das sehen, um es beurteieln zu können.

So schwer ist das doch nicht vorzustellen.

Online-BEispiel

@eintrachtemil: Danke für die detaillierte Info! Mit display:table-cell hab ichs aber nicht mal im Firefox 3 zum Laufen bekommen. Hmmm.

[pekka]

*push*
Na, keiner eine Idee?

[unset]

Überelement: position:relative;
Das unten hinzuklebende Element: position:absolute; bottom:0px;

[pekka]

Original geschrieben von unset
Überelement: position:relative;
Das unten hinzuklebende Element: position:absolute; bottom:0px;

Das klingt gut, werde ich morgen mal ausprobieren!

[pekka]

Schon im anderen Thread gesagt, klappt wunderbar, vielen Dank!