ugrás a tartalomhoz

Div igazítás alulra probléma

alkony4 · 2016. Ápr. 3. (V), 12.13
Szervusztok!

A következő problémával találkoztam s szeretném a segítségeteket kérni.
Adott egy div, benne több div melyeket a main divemen belül szeretnék alulra igazítani... ezt a szokványos módon oldom meg.

1. div -> display: table
2. div -> display: table-cell; vertical-align: bottom;

Eddig, szép és jó alulra is rendezi a dolgokat, csak, hogy nemrég különböző okok miatt a divem height paraméterét ki kellett vegyem és a max-height paraméterrel kellett meghatározzam, hogy maximálisna milyen magas lehet mivel a divem tartalma dinamikus.
Probléma, hogy height paraméter nélkül viszont a vertical-align: bottom;-ra nem reagál.

(előre is elnézést de most inline stílus formázást nyomtam bele)

Fix height paraméterrel:
<div style="width: 200px; height: 200px; border: 1px solid red; display: table;">
	<div style="display: table-cell; vertical-align: bottom;">
		<div style="height: 200px; display: flex; flex-flow:column-reverse wrap-reverse;">
			<div style="float: left; width: 50px; height: 50px; background-color: green;"></div>
			<div style="float: left; width: 50px; height: 200px; background-color: blue;"></div>
		</div>
	</div>
</div>
Max-heighttel:
<div style="width: 200px; height: 200px; border: 1px solid red; display: table;">
	<div style="display: table-cell; vertical-align: bottom;">
		<div style="max-height: 200px; display: flex; flex-flow:column-reverse wrap-reverse;">
			<div style="float: left; width: 50px; height: 50px; background-color: green;"></div>
			<div style="float: left; width: 50px; height: 200px; background-color: blue;"></div>
		</div>
	</div>
</div>
Mit tanácsoltok hogyan küszöbölhetném ki a hibát?

Előre is köszönöm válaszaitokat.
‹ Google map útvonaltervező saját weboldalra kétszer megnyitott weblap session-el való megkülönböztetése ›
 ■
1

Absolute

vbence · 2016. Ápr. 6. (Sze), 09.54
...ezt a szokványos módon oldom meg.

Ez nem éppen a szokványos módja ;)

<div style="position: relative;">
    Helló<br>
    Föld<br>
    Vége<br>
    <div style="position: absolute; bottom: 0; color:red;">aljára<br>kerül</div>
</div>
A befogadó DIV position paraméterét megadva, őhozzá képest lesz értelmezve benne a `bottom` (ő lesz az offset parent).