[CSS] Box in anderer Box unten platzieren

[pho3niX]

Hi zusammen,
hab mal wieder ein Problem mit HTML/CSS. Aber erstmal der Quelltext:

<div style="height:500px">
	/* ... Höhe ~200px ... */
	<div id="unten">
		blabla
	</div>
</div>

Nun möchte ich, dass die <div id="unten"> um unteren Ende der übergeordneten Box platziert wird.
Welchen Code brauche ich dafür?

Danke schon mal

 

[Benjamin_L]

so z.B.
http://lebsanft.org/testcase.html

so ists für mich logischer, wenn das div Element unter dem anderen sein soll, kanns im Code nicht drinnen sein.

oder willst du's unten im selben div haben ?
das geht dann so:
http://lebsanft.org/testcase2.html

 

[pho3niX]

Öhm... so wie das 2. sollte es werden.

Aber wie hast du das genau gemacht? Sorry, mit JS hab ich mich noch nich wirklich auseinander gesetzt. Was bewirken die Methoden/Funktionen?

 

[Benjamin_L]

ok, ich zerpflück dir das ganze mal

var container = document.getElementById("container");
var unten = document.getElementById("unten");

weist einfach das Element mit der jeweiligen id den variablen zu.

unten.style.marginTop = container.offsetHeight - unten.offsetHeight + "px";

.style.marginTop greift auf die margin-top CSS Eigenschaft des vor dem Punkt stehendes Element zu. In diesem Fall wollen wir diese Eigenschaft zuweisen, deswegen links vom "=".

container.offsetHeight - unten.offsetHeight bildet die Differenz zwischen den jeweiligen Höhen der Elemente

+ "px"; fügt dem Ganzen noch die richtige Einheit hinzu.

window.onload = div_pos; ruft beim Laden des Dokuments die Funktion auf

Kurzfassung: Ich stell den Abstand des zweiten divs zum oberen Rand des ersten divs einfach auf die Differenz der beiden Höhen.

 

[pho3niX]

Danke, aber das hat nicht den gewünschten Effekt gebracht, ist aber auch egal, da ich das "Problem" anders gelöst habe

 

[Benjamin_L]

wie denn ?

bzw. was funktionierte denn nicht ? hast du alles so gemacht wie bei mir ?