I am trying to make a portion of my site that has images spanning in a row across the width of the container, each of which having its own "content text". When the image is clicked the text drops down below the row of images. When the next image is clicked, its corresponding text drops down, replacing the last content text. Each content text spans the full width of the container below the row of images and only one can be viewed at a time.

So now that I've described the goal, let me show you what I have. You'll need to resize the results window to see the images(alt text) spanning the width in one row instead of stacked on top of each other:

http://jsfiddle.net/DNDeK/

So you can see that right now, the content text is pushing the other images down the page. I have tried playing with the div arrangement, but can't find a way to make the content expand below the entire row of images and still correspond to the right image. Please help?