CODEWITHSUNDEEP
cssvertical-alignment
eugeneration
eugeneration

Reputation: 31

Vertical alignment to top AND bottom of a parent div

I am attempting to implement the following layout without using javascript and without using tables:

There are a LOT of rows on a page. Each row is filled by four content elements, the tallest of which determines the height of the row. Each content element has two other elements, in this case, an image and a caption. The image is aligned to the top of the row while the caption is aligned to the bottom.

In the HTML structure, the image and caption must stay together in the content element.

Some solutions I've tried:

Splitting each row into two: a row of images and a row of captions, separates the images from the captions.

Using the famous equal height column div structure results in an ugly absolutely-positioned Matryoshka Doll arrangement of divs.

The issue with tables is that the page will be made MUCH more dynamic in the future (rearrangable content, fluid layout, dynamic searching, content of varying width), and tables will be extremely annoying to do this with.

Upvotes: 0

Views: 442

Answers (1)

Jbrack
Jbrack

Reputation: 79

If I'm imagining your markup correctly, perhaps this will work for you:

http://jsfiddle.net/Puppies4Life/Fd94X/1/

I absolutely positioned the .caption to the bottom of .row. I made it a point to position .caption to .row instead of the immediate parent .content because of the varying heights of .content. The image remains in the flow of the document. I Added some additional padding to the bottom of .row to account for the text and put in a simple clear fix (I suggest using a better option in your production code)

Hope this helps solve your problem or possibly ignites an idea or two!

Upvotes: 1

Related Questions