Ik wil graag op een website een plaatje onderaan binnen een div hebben.
Alleen deze div rekt mee met de content pagina.

Ik heb al veel verschillende dingen geprobeerd, maar krijg het plaatje maar niet onderaan de div bij het meerekken.

Het gaat om deze site: http://bit.ly/bOGvVx

Alvast bedankt,

groeten Mathijs

HOi hoi,

Plaats het plaatje in een aparte div en zet die op zijn plek binnen de div met content.

Knufs Astird.

Hallo Astrid,
bedankt voor je snelle antwoord.
Ik heb het plaatje in een div gezet, maar het lukt me nog steeds niet om het plaatje beneden te krijgen.
Als ik position absolute mee geef en bottom 0 komt hij echt tegen de rand van het venster aan, maar hij moet tegen de onderkant van de div aan komen.

Welke code moet ik dan gebruiken?

Mathijs

Een div is niet perse nodig. Geef het plaatje een relative position en de juiste margins, dat moet voldoende zijn.

Ik heb nu het plaatje in een div met volgende css:

Code:

#sidebar .foto {
	margin: 320px 0 0 8px;
	position: relative;
}

Maar als de pagina dan groter wordt, dan blijft het plaatje op zijn plaats.

Hoi hoi,

De position relative gebruik je zonder div.

Wat misschien ook wil helpen is hem met align=right weg te zetten, wel de tekst er boven blijven houden dan.

Knufs Astrid.

Ook zonder de div en met position relative, gaat het plaatje niet mee naar onderen.

margin-top?

Ja dat werkt wel, maar als de pagina vervolgens groter wordt omdat er meer tekst in staat, dan blijft het plaatje ergens midden in die balk staan ipv onderaan.

Even een vlug vraagje, is het zo al gelukt? Want ik zie het plaatje
(edit: foto verwijderd)

al onderaan de div staan, of moet deze echt helemaal tegen de rand aan?

Hij staat idd door een margin-top onderaan, maar bij het uitrekken blijft hij staan ipv naar onderen te gaan.

Nick, zou je die link willen verwijderen ivm indexeren van google?

Het probleem zit hier:

#sidebar .foto {
margin: 320px 0 0 8px;

Hierdoor heeft de foto altijd een vaste waarde ten opzichte van de </ul> (Namelijk 320px)
Als jij dan de tekst in de content gaat vergroten, wordt de sidebar div wel groter, maar de tekst in de sidebar blijft op dezelfde plaats, daarom blijft de margin van 320px ook hetzelfde, en blijft het plaatje 320px onder de tekst in de sidebar.

Hallo Nick,

Dit is me inderdaad duidelijk, maar zonder deze vaste margin is het probleem ook niet opgelost.

Gr. Mathijs

Je moet het parent element van de foto "relative" maken en dan het bewuste element "absolute". Dat het niet lukt met absolute komt omdat de foto wordt uitgelijnd met het eerste parent element dat wel relative gepositioneerd is.

Dus in jouw geval moet #sidebar position:relative; krijgen. Dan kun je .foto position:absolute; bottom:0; right:0; width:183px; height:148px; meegeven.

Hartelijk dank G. Meijer,

ik heb hier zeker weer wat van geleerd betreffende de positionering dmv relative en absolute.

Kunt u mij ook vertellen wat de termen precies inhouden? Ik weet dat de term absolute ervoor zorgt dat je het element vrij over de hele pagina kunt verplaatsen, maar niet echt wat het doel van relative is.