Question

I am trying to vertically align one div to the adjacent div which is dynamic in height.

Most methods I have come across require me to know the height of the parent div. But if you see my example, it is the “right” div that drives the height of the entire section.

I am trying to have the text from div “left” appear vertically centred to the div on the right. The “parent” div does not have a fixed height either.

How can I do this, ideally with CSS?

Thanks.

My example:

http://jsfiddle.net/halogenmobile/McVAE/9/

Answer 1

Sometimes CSS’s box model doesn’t work for this, so you can revert to the good old fashioned table model. (Not to say you have to adjust your markup).

Take a look at display: table, display: table-cell and vertical-align: middle.

I updated the fiddle: http://jsfiddle.net/McVAE/18/