Question

for reference here is a jsfiddle link:
http://jsfiddle.net/STmwz/4/

To start off with, there is only the top div. When the user clicks the edit button, I have some javascript to replace the top div with the bottom div. Problem is, when the replace happens, there is a slight twitch of sorts: everything jumps a couple of pixels.

I think the best way to fix this would be to have the top div vertically aligned. I have a height set for the top div that matches the height of the bottom div when it replaces the top one. So if both are aligned vertically, then no jump!

Problem is, vertical-align isn’t working on the top div.

Any idea on what I could do?

Answer 1

I believe the elements that you want to vertically align must have “inline” or “table-cell” display.

Source: https://developer.mozilla.org/en/CSS/vertical-align

Here’s an example of it working: http://jsfiddle.net/STmwz/19/