✔ CSS unten positionieren

[lordimac]

Guten Abend Forengemeinde,
ich habe hier ein mehr oder weniger kleines Problem und bin mit meinem Latein komplett am Ende oder es liegt an der Uhrzeit, ich weiß es nicht.

Es geht um die Positionierung eines DIV Elementes.

Ich habe dazu mal zwei Dateien hochgeladen (sorry, derzeitig läuft alles auf Homeserver).

http://www.file-upload.net/download-2014557/index.html.html
http://www.file-upload.net/download-2014558/style.css.html

Und zwar folgendes:
Das Div Element welches schwarz umrandet und gelbe Hintergrundfarbe hat soll in der Contentspalte ganz nach unten wandern.

Habe schon so einiges probiert, aber irgendwie landete ich immer wieder bei zwei Ergebnissen: Entweder es wird von der Höhe her unter den Links rechts angezeigt oder aber es überlagert den Text wenn dieser länger ist als die rechte Linkspalte (z.B. bei absoluter Positionierung - klar).

Wär nett wenn mir jemand mit einer Idee weiterhelfen könnte.

Grüße, lordimac

PS: Bei dem CSS File bitte nicht wundern - ist erstens unter Bearbeitung und zweitens beinhaltet die Seite hier schon mehr Elemente

 

[Maik]

Moin,

diesem Anwendungsfall hab ich vor geraumer Zeit einen Webmaster-FAQ-Artikel gegönnt:

• CSS Wie richte ich eine Box am unteren Rand der Elternbox aus?

.divunten {
        border: 1px solid black;
        background-color: yellow;
        padding: 10px;
        position:absolute;
        bottom:0;
}

#contentcolumn {
        width: auto;
        margin: 0 166px 0 166px;
        background-color: #c9c;
        position:relative;
}

mfg Maik

 

[lordimac]

Ist ja auch alles richtig und super, doch weiterhelfen tut es mir leider nicht. Aso jedenfalls nur indirekt.

Die Positionierung durch die Verwendung des Attributes relative auf das Mutterelement bzw. absolute auf das Kindelement funktioniert, doch wird dadurch Text welcher bis zum Ende des eigentlichen Contentbereiches geht von dem zusätzlichen Container überlagert (das ist das was ich bei absoluter Positionierung meinte).

Zum Vergleich habe ich nochmal eine index2.html hochgeladen bei welcher der Text die volle Höhe des Templates einnimmt und das CSS entsprechend erweitert:

.divunten {
	border: 1px solid black;
	background-color: yellow;
	padding: 10px;
	position: absolute;
	bottom: 0;
}

http://www.file-upload.net/download-2015508/index2.html.html

Danke für weitere Lösungsansätze.

Grüße, lordimac

 

[Maik]

#contentcolumncontent {
        position: relative;
        margin: 0 10px;
        padding-bottom: 50px; /* Hält einen Abstand zur unteren Box */
}

mfg Maik

 

[lordimac]

OK, ja, die Idee hatte ich ebenso schon, nur leider wird dann ja der Contentbereich immer um 50px größer - auch nicht unbedingt das was ich möchte.

Weitere Ideen? Ich geb nicht auf

 

[Maik]

Dann such dir aus, was dir lieber ist: Eine Textpassage, die unter der Box verschwindet, oder ein sauberer Abschluß zu der Box.

Übrigens wird der hinzugefügte Innenabstand von der absolut positionierten Box kompensiert, womit der Contentbereich auch nicht um dieses Maß anwächst.

mfg Maik

 

[lordimac]

OK, eine Idee kam mir jetzt doch noch. Habe den Inhalt der unten positioniert werden soll noch in ein extra DIV Element gepackt und das mit einer festen Höhe versehen. Funktioniert jetzt soweit und dieses lass ich dann ja auch nur anzeigen wenn eben auch dieses Element angezeigt werden soll. Muss es noch mit InternetExplorer und co testen, aber in Safari und Firefox sieht das Ergebniss schonmal erwartungsgemäß aus.

Grüße, lordimac