CSS: Textbox rechtsbündig ausrichten mit dynamischer Breite und Höhe

Stellt euch folgendes Szenario vor. Ihr wollt eine beliebige Textbox irgendwo auf eurer Seite rechtsbündig unten positionieren. Leider wisst ihr deren Breite und Höhe nicht bzw. könnt nicht sicherstellen das sich diese nicht vielleicht doch einmal dynamisch ändern könnte – Vielleicht läuft ja mal eine Überschrift breiter oder der Text passt einfach nicht in die vordefinierte Höhe. Ich habe lange gefummelt aber nun schlussendlich doch eine Lösung gefunden.

Zunächst basteln wir uns einen Container. Diesen brauchen wir um darin unsere Textbox positionieren zu können. Ganz wichtig ist dabei dem Container eine „position“ zu geben, da unser Vorhaben (wie ich schmerzlich feststellen musste) ansonsten schon zum Scheitern verurteilt ist. Darin setzen wir nun einen weiteren Container, der unsere Textbox beinhalten soll. Um der Box nun noch Leben einzuhauchen, befüllen wir die Box noch ein wenig mit Text. Zu beachten ist dabei, dass wir ein Element in der Box benötigen, welches später die Breite definieren soll. Der Einfachheit halber benutzen wir zum „Aufspannen“ der Box einfach eine Überschrift „<h2>“. Funktioniert natürlich auch mit anderen Elementen, aber gerade mit einer Überschrift wird der Effekt schön deutlich auf den es uns hier ankommt, da Überschriften in der Länge immer variieren können. Unser HTML-Schnipsel sieht demnacht folgendermaßen aus.

<div class="container">
<div class="textbox">
<h2>Die dynamische rechtsbündige Textbox</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>

Um nun unseren Effekt umzusetzen, bedarf es einiger CSS Regeln, die im Großen und Ganzen zwei Kniffe parat halten. Im Folgenden sind die entsprechenden Zeilen markiert.

.container {
    height: 400px;
    width: 600px;
    position: relative; /* Wichtig: Hier muss zwingend eine Angabe gemacht werden. Andere Werte als relative sollten auch funktionieren */
    border: 1px solid #000;

}
.textbox {
    right: 10px;
    bottom: 10px;
    position: absolute;
    margin-left: 600px;
    border: 1px solid #000;
}
.textbox h2 {
    white-space: nowrap;
}

So, nehmen wir das ganze einmal auseinander. Die Angaben für den .container sollten selbsterklärend sein. Wirklich wichtig ist nur die „position“-Angabe. Die „border“ habe ich nur angegeben, damit man den Effekt besser sieht.

Kommen wir nun zur .textbox. Erstmal wird die Box wie gewünscht unten rechts positioniert. Dafür muss die Box position:absolute sein. Nun erscheint in Zeile 12 der erste Kniff. Um die Box dynamisch in der Breite laufen zu lassen, ist es notwendig, diese von links her an die rechte „Wand“ von .container zu „drücken“. Dies erledigt „margin-left“ wunderbar. Der Wert „600px“ schiebt also die Box wenn es nötig ist komplett bis an den rechten Rand von unserem Container.

Damit nun unsere Textbox nicht an den rechten Rand geklatscht wird und wir somit nur noch Buchstabensalat erhalten, brauchen wir wie bereits erwähnt ein Element, welches den Mächten des „margin-left“ Widerstand leistet. Das erledigt für uns der kleine unscheinbare Befehl in Zeile 16 „white-space: nowrap“. Dieser Befehl verhindert, dass Zeilen an Leerzeichen oder ähnlichem automatisch umgebrochen werden und ist deshalb für unseren Zweck geradezu prädestiniert. Wir erreichen somit, dass sich die Breite von .textbox an der Breite der Überschrift orientiert.

Ausblick: Man kann nun natürlich noch ein wenig mit den Werten spielen. Zum Beispiel könnte es passieren, dass eine Überschrift recht kurz ausfällt. Um nun den oben bereits erwähnten unschönen Effekt zu verhindern, dass die Box zu schmal wird und am rechten Rand klebt, kann man noch eine „min-width“ für .textbox angeben. Ähnlich verhält es sich mit einer Mindesthöhe „min-height“, wenn man eine gewisse Höhe immer haben will.

Umgebung: Getestet habe ich das in allen moderen Browsern. Also Firefox, Chrome, Safari. Natürlich afft der Internet Explorer wieder rum. Komischerweise diesmal der 7er mehr als der 6er. Dort funktioniert mein Ansatz noch nicht richtig. Was mich wundert ist, das auch der Opera diesmal nicht mein Freund zu sein scheint. Auch da gibt es Probleme in der Darstellung.