Afbeeldingen naast elkaar in te kleine div

[_Moe_]

Ik wil het volgende bereiken:

Ik heb een div met een breedte van 500px, in deze div moeten 3 afbeeldingen komen te staan van 200px breed. Dat wil dus zeggen dat ik 100px meer heb dan mijn div breed is. Dus van de laatste afbeelding zouden maar 100px getoond mogen worden.

Ik heb totaal geen idee van hoe ik dit zou kunnen bereiken, ik ben al wat aan het spelen geweest met de overflow, maar mijn laatste afbeelding gaat telkens onder de 2 vorige staan.

Iemand een idee?

Het is trouwens niet de bedoeling dat deze laatste afbeelding wordt bijgeknipt.

[arie_papa]

Volgens mij gewoon een negatieve marge van margin-right=-100px geven aan de laatste afbeelding.
Ik weet alleen niet of je het totale plaatje nog zichtbaar wil hebben (anders moet je denk ik even met Z-index gaan stoeien)

[Bosmonster]

Er een container in zetten die wel 600 breed is en die buitenste van 500 een overflow hidden geven.

[_Moe_]

Bedankt!
Dat ik zelf nog niet aan die negatieve marge gedacht had .

Ik heb de container met afbeeldingen een negatieve marge gegeven en de parent container overflow hidden gezet.

[R4gnax]

Als je het nou gelijk wat meer flexibel maakt voor als er later nog meer bij zou moeten komen of de groottes van je afbeeldingen gewijzigd worden:

Maak je plaatjes display: inline-block en geef aan de 500px brede container waar ze in zitten een overflow:hidden en white-space:nowrap mee.

[klaaz]

De laatste suggestie zou ook de mijne zijn.

Sowieso handig om te weten is dat een img standaard een inline element is. Als je er mee wilt floaten is het dus handig dat je hem een display:block mee geeft. Kun je gelijk de marges (in sommige browser) weghalen met margin:0.

[url=http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/]Interessant artikeltje over inline-block,/url]

[mithe]

Waarom zet je de width van elk plaatje niet op 166px dan??