html - Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)

Question

I'm trying to center two divs with dynamic heights inside a dynamic wrapper... I've been playing with all sorts of tricks to try and get this working cross-browser to no avail, does anyone have a suggestion? See graphic for explanation! The purple block is another block on content I want to sit 20px below the dynamic wrapper.

• NOTE: For the note to the left of the red box, I meant to say "It should scale to be as tall as whichever contained div (green or red) is taller.
• I also do not know whether the red or green box will be taller - just that the green box's height is dynamic and the red's height is fixed.

Answer 1

Use display: inline-block + vertical-align: middle on the blocks, so they would be aligned just like you want them to.

Look at this example: http://jsfiddle.net/kizu/Tky8T/

Even more: the height of the red div can be dynamic too!