Vertical-Align in Box will nicht

[gaplex]

Hallo,
ich hab eine kleine gefloatet Box auf einer Seite. Diese Box enthält Text. Ich möchte das der Text in dieser Box unten bündig ausgerichtet wird. Also

vertical-align: bottom;

Die Box regiert auf alle Veränderungen aber nicht auf die Vertikale ausrichtung. Was mache ich falsch?

CSS:

#content #txtzwei {
    width: 196px;
    height: 58px;
    float: left;
    vertical-align: bottom;
    text-align: left;
}

#txtzwei .mag {
    color: #009BEE;
}

HTML:

<div id="txtzwei">
<span class="mag">Ueberschrift</span><br />
ganz bischen Text mit<br />Absatz.
</div>

Danke schon mal für Eure Hilfe!

 

[threadi]

Das Problem ist, dass die Browser eine vertikale Positionierung derzeit nur für Tabellen-Elemente zulassen. Da du keine solche hast klappt es auch nicht.

Lösungsmöglichkeiten:
a) HTML-Tabelle verwenden. Syntaktisch völlig falsch, wird aber richtig dargestellt.
b) dem #content #txtzwei die Eigenschaft "display: table-cell;" geben. Dadurch wird das Element zu einer CSS-Tabellenzelle, wodurch wiederum die vertikale Zentrierung möglich wäre. Dies wäre aus HTML-Sicht völlig ok, allerdings funktioniert diese CSS-Eigenschaft bisher in keinem IE, nur im FF und Opera.
c) Du positionierst den Text absolut nach unten. D.h. du muss dem umgebenden div eine feste Höhe geben und relativ positionieren. Danach kann das enthaltene span absolut nach unten positioniert werden. Kann jedoch abhängig vom Design zu Darstellungsproblemen führen.

b) wäre der Königsweg, lässt aber wie gesagt der IE leider nicht zu.

 

[gaplex]

Vielen Dank für diese Ausführliche Antwort. Ich werd mal austesten was, dass beste ist. IE auschließen ist immer so ne Sache, in diesem Fall aber nicht sehr dramatisch.

 

[Efchen]

Durch eine nicht vorhandene vertikale Positionierung wird aber in der Regel kein Browser "ausgeschlossen". Es sieht vielleicht nicht so schön aus, die Funktionalität bleibt aber zu 100% erhalten.

Durch fehlerhafte Semantik, also z.B. Missbrauch von Tabellen zu Layoutzwecken (insb. bei verschachtelten Tabellen) werden aber u.U. tatsächlich Browser "ausgeschlossen", d.h. die Seite funktioniert nicht mehr, der Inhalt kann nicht sinnvoll rübergebracht werden. Und das ist immer schlimmer als wenn die Darstellung nicht so ist, wie man sie sich wünscht, weil der Browser einfach nicht gut genug ist.

Es wird mir halt immer ein Rätsel bleiben, wieso Menschen minderwertige Software benutzen und sich dann noch beschweren, wenn sie nicht den vollen Funktionsumfang bekommen, den bessere Programme wie selbstverständlich bieten.

 

[gaplex]

Da der beinhaltende Text fest ist, habe ich einfach die entsprechende Box nach unten verschoben. Das ist dann für keinen Browser ein problem und "valide".