Question

What I’m trying to achieve:

Two plus rows with each containing three columns. For the rows, I have specified relative positioning containing three images per row, for two rows. This works fine.

I want layered divs beneath those images, using position absolute and negative z-index, which also works fine for the first row. The second row, the images line up fine, but the absolute positioned divs within appear on the first row.

jsFiddle here:
http://jsfiddle.net/Ajdin/tNGCM/

I’ve read a few questions on the board, and googled css absolute positioning since that’s where I’m thinking I may be misunderstanding something. Please help 🙂

Answer 1

Since the div “.hireBioImg” set “float” property, it wont be extended the height to its parent. so in hireBioRow, you need to add “clearfix” to wrap float elements inside.

Please see updated here:
http://jsfiddle.net/tNGCM/1/

And more about clearfix:

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.

http://www.webtoolkit.info/css-clearfix.html