overflow not flowing over enough

Question

I've got a piece of code consisting of styled images that need to fit within a fixed sized div. If it does not, it should flow over. However, the floated element that does not fit, flows over as it should but touches the other elements and places itself over one of their shadows.

It's best to explain using an example: http://jsfiddle.net/wjw83/10/

The 7th image (barely visible) should vanish entirely or move further down where it moves out of the visible area. Can anyone help me accomplish this?

Thank you.

EDIT

Being out of ideas and on the verge of raging, I've started pasting random attributes and eventually was successful.

Solved: http://jsfiddle.net/wjw83/13/

All I had to was add "margin-bottom: 20px;" to the image class. Since it's the same value as the shadow, it leaves the shadow intact while completely removing the clipped element. Whoohoo!

Answer 1

Being out of ideas and on the verge of raging, I've started pasting random attributes and eventually was successful.

Solved: http://jsfiddle.net/wjw83/13/

All I had to was add "margin-bottom: 20px;" to the image class. Since it's the same value as the shadow, it leaves the shadow intact while completely removing the clipped element. Whoohoo!

Answer 2

.main{
    padding-top: 15px;
    width: 870px;
    height: 140px; /* Reduced height */
    overflow:hidden;
}

Live demo: Fiddle