[CSS] 3 floating divs en 'bottom' van div 1, 3

[The.Terminator]

Heb het volgende probleem.

Ik heb een 3 divs met een fixed width naast elkaar dmv een float.
Deze staan in een div wrapper, werkt helemaal goed.

Nu moeten div 1 en div 3 alignen met de onderkant van div 2 (dit is de div met de meeste content en dus het hoogst). Wat ik vond via Stackoverflow is dat je dan de wrapper een position relative moet geven en de divs in de wrapper een position absolute en bottom:0. Alleen dat werkt niet. De eerste div gaat wel naar beneden alleen div 2 en div 3 gaan er overheen (overlap).

Zal wel weer iets lulligs zijn, maar iemand een idee ?

[R4gnax]

The.Terminator schreef op dinsdag 09 juli 2013 @ 08:52:
Zal wel weer iets lulligs zijn, maar iemand een idee ?

Geen floats gebruiken maar display:inline-block en vertical-align:bottom.

[The.Terminator]

Wis en waarachtig, mijn dank is groot.
Door bovenstaande toe te passen zat er nog wel een spacing tussen de divs, maar dat is ook opgelost.
Voor uitleg zie : http://css-tricks.com/fig...en-inline-block-elements/

[Bosmonster]

Dat, of ze absolute positioneren idd in een relative container, zoals je voorbeeld zegt. Als ze over elkaar heen gaan kloppen de afmetingen simpelweg niet.

[ Voor 27% gewijzigd door Bosmonster op 09-07-2013 09:16 ]

[incaz]

Voorbeeld met absolute: http://jsfiddle.net/gcmBJ/

Note: de middelste kolom moet je niet absoluut positioneren, omdat de wrapper anders geen hoogte krijgt omdat alle onderliggende elementen uit de flow zijn gehaald. Ook is de breedte van de middelste kolom niet defenieerd, maar dat kan op zich wel, alleen moet je dan ook de wrapper een vaste breedte geven.

[MueR]

Bosmonster schreef op dinsdag 09 juli 2013 @ 09:15:
Dat, of ze absolute positioneren idd in een relative container, zoals je voorbeeld zegt. Als ze over elkaar heen gaan kloppen de afmetingen simpelweg niet.

Vast wel, maar met alleen bottom 0 gaan sommige browsers de left ook maar op 0 zetten

[Bosmonster]

MueR schreef op dinsdag 09 juli 2013 @ 17:43:
[...]

Vast wel, maar met alleen bottom 0 gaan sommige browsers de left ook maar op 0 zetten

Dan stel je de left zelf in. Wie zegt dat je die leeg moet laten. Je kunt ze afstemmen op de width van de items, je kunt ze ook link, rechts en midden zetten.

Voordeel is dat de volgorde in de code niet meer vast zit aan je display-order en je kunt beginnen met je content ipv je menu. Wat wel zo fijn is voor SEO en accessibility.