Set element at the vertical middle of a row - html

Question

In my grid, I want to do something like this:
[main row]
|[columns-10] |[columns-2][row]"above img"|
| Some text | |
| here, on |[row] image here|
| multiple | |
| lines |[row] "below img"|
| ... | |
Notice how the rows in columns-2 are evenly spaced (vertically), relative to the text in columns-10.
Zurb gets me close but the rows inside the columns-2 seem to not be aware of the height of the outer row.
Here's my (haml) code:
.row
.columns.large-10
%p #{"It does work on all browsers " * 20 }
.columns.large-2
.row.right
.columns.large-12
above img
.row.right
.columns.large-12
%img{ src: "http://www.gravatar.com/avatar/4d1795fc22c16e533fd1d11fae39fef8.png",
alt: "Baboon's logo" }
.row.right
.columns.large-12
below img
Edit: Here's the JSFiddle try to resize the window and see how the image stays in the top left corner instead of being at mid height of the large text.

Answer 1

You need to include jQuery library in your RoR application and change the HAML code and add a JS file with the below JS code.
HAML Code:
.row
.columns.large-10
%p #{"It does work on all browsers " * 20 }
.columns.large-2
.row.right
.columns.large-12
above img
.row.right#image-container
.columns.large-12
%img{ src: "http://www.gravatar.com/avatar/4d1795fc22c16e533fd1d11fae39fef8.png",
alt: "Baboon's logo" }
.row.right
.columns.large-12
below img
JS code with jQuery library:
var height=$('#image-container').parent().siblings().height();
var above_height=$('#image-container').siblings().height();
$('#image-container').find('img').height(height-2*above_height)
Here is the JSFiddle demo.