CSS: Element Being Pushed Down

I have an issue where when the user inputs text into the textfield, the JavaScript that dynamically displays and writes how many chars he/she has left keeps pushing the wrapper that contains the button/links elements dow开发者_C百科n a certain number of units. I want the button wrapper to stay fixed and not move when the JavaScript does it's thing. The screenshots below illustrate what is happening.

BEFORE

AFTER

Any general suggestions as to how you prevent this?

I don't know how you add the text below the textbox but you could give the element an initial visibility value of hidden. It won't be shown but it will occupy space.

Update:

DEMO

You might not even need to hide the element beforehand. If you give it a fixed height and it is empty by default, it works as well.

Set the label to position: absolute.
This will cause the layout engine to ignore any space that it occupies.

Alternatively, you can set it to visibility: hidden when not in use.
This will cause it to always occupy space, even when hidden.
You can then adjust your layout accordingly to make it fit.

Position the chars left text absolute.

I see two straight forward ways of doing this:

1. Specify a fixed size for the element that will contain the message or the element containing the field and the message, so there is room for the message from the start.

2. Use absolute positioning for the message, so that it doesn't affect any other elements at all.