Stop divs from overlapping

Question

I have a three images in a row wrapped by a div. A link is in a separate div below the first div.

http://jsfiddle.net/sGmjU/1/

The problem I am having is that when the browser is wide enough, the images are ina horizontal row above the link as they should be.

When the width is smaller than the three images though the link staysright where it was and the images show up in a column over and through the link.

I want the images to stay in a row and have the link stay under the images.

What is the core concept? I have tried several things with no luck.

Answer 1

Take the hard height value out of #images:

#images {
    width:50%;
    margin:auto;
    display:block;
    vertical-align:middle;
}

The height value was forcing the images inside the div to overflow, and subsequently overflow onto the link div.