for the life of me, i can't figure out why the margins won't render properly on some of the images here. After the first and second landscape orientation images, the margins overlap with the image/container above it.
Can anyone shed some light?
http://jsfiddle.net/JeffPannone/rDw6R/17/
*sorry everyone. I provided the wrong jsfiddle link previously. i corrected it here
One option is to set overflow:auto
to the div.
jsFiddle example
The margin of you images can collapse out of the div because you div has no border or padding.
I was adding some W3C documentation, but it's a bit much to give you a clear description of margin collapse in a few lines. Just follow the link above for detailed information.
A simple fix would be adding a padding of 1px 0
to the div.
http://jsfiddle.net/rDw6R/1/