[CSS] Nested multikolom div met footer

[aCCuReRaS]

Ik heb een multikolom layout met 4 kolommen.
In elke kolom heb ik nog 2 kolommen naast elkaar, vervolgens een div eronder over de hele breedte (verkrijgbaar in) gevolg door een footer (plaats in winkelmandje) in de div.

Nu vraag ik me af of er een manier is om deze footer steeds tegen de onderkant te krijgen, zodat hij in de 4 divs op dezelfde hoogte zit. Het lukt me namelijk niet direct...

Zie screenshot voor details: https://docs.google.com/o...kLWE3ZDQtY2M0NTVhNWM4YzRm

[André]

Wat heb je al geprobeerd?

[OkkE]

Ik zou elk "product" een eigen blok maken. Dat blok opdelen in twee; bovenste deel bevat de informatie en heeft een vaste hoogte, onderste deel valt er automatisch onder.

Omdat ik vandaag in een good mood ben: http://dabblet.com/gist/1533612

[aCCuReRaS]

OkkE schreef op donderdag 29 december 2011 @ 12:24:
Ik zou elk "product" een eigen blok maken. Dat blok opdelen in twee; bovenste deel bevat de informatie en heeft een vaste hoogte, onderste deel valt er automatisch onder.

Omdat ik vandaag in een good mood ben: http://dabblet.com/gist/1533612

akkoord, maar in mijn geval heb ik 3 delen

1. Product naam en prijs; kan vaste hoogte zijn
2. Kleurinformatie: variabele hoogte naargelang het aantal kleuren
3. Add to cart knop; vaste hoogte, maar moet onderaan uitgelijnd worden

Het is het middenste stuk dat moeilijk doet, omdat het variabel is qua hoogte.

[Bosmonster]

Ipv height kun je ook nog min-height gebruiken, dan breekt het niet bij meer content.

Alternatief kun je ook de bestel-knop absoluut positioneren in de blokken onderin en deze ruimte vrijhouden van content met een bottom-padding.

[OkkE]

De oplossing van Bosmonster is dan het meest flexibel en veilig.

Hoewel ik denk dat je ook het middelste deel best een vaste hoogte kunt geven. Je wil tenslotte dat de product-blokken allemaal wel even hoog zijn, lijkt me, om een overzichtelijk/rustig beeld te geven. Kijk wat de max hoogte van het middelste blok kan zijn en stel dat in; wanneer dat blok standaard 200 pixels hoog zou moeten zijn, doe je in mijn ogen sowieso iets fout.

[aCCuReRaS]

Bosmonster schreef op donderdag 29 december 2011 @ 12:43:
Ipv height kun je ook nog min-height gebruiken, dan breekt het niet bij meer content.

Alternatief kun je ook de bestel-knop absoluut positioneren in de blokken onderin en deze ruimte vrijhouden van content met een bottom-padding.

het breekt niet, maar de blokken zijn niet meer even hoog: resultaat

[aCCuReRaS]

OkkE schreef op donderdag 29 december 2011 @ 12:50:
De oplossing van Bosmonster is dan het meest flexibel en veilig.

Hoewel ik denk dat je ook het middelste deel best een vaste hoogte kunt geven. Je wil tenslotte dat de product-blokken allemaal wel even hoog zijn, lijkt me, om een overzichtelijk/rustig beeld te geven. Kijk wat de max hoogte van het middelste blok kan zijn en stel dat in; wanneer dat blok standaard 200 pixels hoog zou moeten zijn, doe je in mijn ogen sowieso iets fout.

Het probleem is dat er in sommige gevallen het middenste blok geen of weinig info zal bevatten, en dan de pagina erg lang zal maken, wat dan veel witruimte creëert.

[OkkE]

Wil je alle grijze blokken altijd de zelfde hoogte geven (A) of allemaal alleen zo hoog als noodzakelijk (B )?

Want op manier A zal je toch ergens een hoogte moeten instellen, wat betekend dat je ook net zo goed het middelste (variabele) deel kunt instellen, lijkt mij?

Manier A:

code:

+---+ +---+ +---+
|:::| |:::| |:::|
|:::| |   | |   |
+---+ +---+ +---+
+---+ +---+ +---+
|:::| |:::| |:::|
|:::| |   | |   |
+---+ +---+ +---+

Manier B:

code:

+---+ +---+ +---+
|:::| |:::| |:::|
|:::| +---+ +---+
+---+
+---+ +---+ +---+
|:::| |:::| |:::|
+---+ |:::| |:::|
      +---+ +---+

rewind. schreef op donderdag 29 december 2011 @ 13:06:
http://dabblet.com/gist/1533772

</div><div> verwijderd en nu lijkt hij goed

Niet wanneer je een 4e "Color row" zou toevoegen.

[ Voor 30% gewijzigd door OkkE op 29-12-2011 13:10 ]

[rewind.]

http://dabblet.com/gist/1533772

</div><div> verwijderd en nu lijkt hij goed

Inderdaad niet wanneer je een color row toevoegd (had ik niet op gelet) maar gaat erom dat je een container div hebt voor alle info. Je zou nog een divje om de omschrijving kunnen toevoegen.

[ Voor 55% gewijzigd door rewind. op 29-12-2011 13:14 ]

[aCCuReRaS]

rewind. schreef op donderdag 29 december 2011 @ 13:06:
http://dabblet.com/gist/1533772

</div><div> verwijderd en nu lijkt hij goed

Ja, met een min-height...
Als er nu voor elk product maar 1 color row staat, hebben we weer een hoop witruimte.

[DeEindbaas]

Omdat het de feestdagen zijn:
http://jsfiddle.net/NWXKw/5/embedded/result/

Zonder min-height etc.. hoop dat dit is wat je wilt.

En hier is de code:
http://jsfiddle.net/NWXKw/5/

[ Voor 31% gewijzigd door DeEindbaas op 29-12-2011 13:46 ]

[aCCuReRaS]

Dreamwire schreef op donderdag 29 december 2011 @ 13:42:
Omdat het de feestdagen zijn:
http://jsfiddle.net/NWXKw/5/embedded/result/

Zonder min-height etc.. hoop dat dit is wat je wilt.

En hier is de code:
http://jsfiddle.net/NWXKw/5/

Je bent geweldig! Dank!

[R4gnax]

Dreamwire schreef op donderdag 29 december 2011 @ 13:42:
Omdat het de feestdagen zijn:
http://jsfiddle.net/NWXKw/5/embedded/result/

Zonder min-height etc.. hoop dat dit is wat je wilt.

En hier is de code:
http://jsfiddle.net/NWXKw/5/

Houdt er alleen even rekening mee dat bovenstaande niet werkt in Internet Explorer 7, mocht je die browser nog moeten ondersteunen. IE7 ondersteunt display:table-cell niet. Daarnaast heb je (in elk geval onder Firefox) problemen met window resizing die niet correct gehonoreerd wordt.