Question

In my page I use ajax loader gif. When the button is clicked the ajax loader is shown, however the text below it moves to upwards and I want them to be constant I mean not to move.
Is there a way to do this? Thanks for help.

It can be seen from here as well:

http://www.dilyurdu.com

function AjaxLoader()
{
    document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />"

    $.ajax({
        type: "POST",
        url: "test1.php",           
        success: function(response) {

          $("#translation").html("hello");

        }

    });


}

<div class="informationArea">
     <h2><span id="infoaream">caballo</span></h2>
     <div id="wordDetailArea">
        <h2>Translation:</h2><p><span id="translation">dog</span></p>
        <h2>Context:</h2><p><span id="context">I have got a dog.</span></p>
     </div>       
</div>

Answer 1

This is because the height of <p> tag changes according to its content.

The fix is to use a fixed height.

<p style="height: 25px;"><span id="translation">dog</span></p>

Note: As of ajax request the length of your content may not be consistent. So you should choose a highest value for height