Usando SlideUp e SlideDown le animazioni spostano lateralmente i div nella pagina, ma non dovrebbero... Come faccio ad arginare questo comportamento odioso?

Codice della pagina:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
    <title> Titolo </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="dark.css" media="all">
    <script type="text/javascript" src="jquery-1.6.4.min.js"> </script>
    <script type="text/javascript">
    function showData(data)
    {
        if (data != "fail")
        {
            var result = $.parseJSON(data);
            $("#content").slideUp(1000,
                function()
                {
                    $(this).find("h1").html(result.title);
                    $(this).find("#container").html(result.content);
                    $(this).find("#key").val(result.key);
                    $(this).slideDown(1000);
                });
                
            $("#previousLevels").slideUp(1000,
                function()
                {
                    $(this).html("");
                    for(var i = 0; i < result.previousLevels.length; i++)
                    {
                        $(this).append($("" + result.previousLevels[i].title + ""));
                        $(this).append($("
"));
                    }
                    $(this).slideDown(1000);
                });
        }
        else
        {
            $("#error").slideDown().delay(3000).slideUp();
        }
    }
    
    $(function()
    {
        $("#solutionForm")
        .unbind("submit")
        .submit(function()
        {
            $.post("go.php", { solution: $("#solutionBox").val(), key: $("#key").val() }, showData)
            .error(function()
            {
                showData('{ "title" : "Errore", "content": "Si &egrave; verificato un errore nella richiesta...", "key" : "", "previousLevels" : [] }');
            });
            $("#solutionBox").val("");
            return false;
        });
    });
    </script>
</head>

<body>
    <div id="levelMenu">
        <div class="menuHeader">Livelli precedenti</div>
        <div id="previousLevels">
            Nessuno
        </div>
    </div>
    
    <div id="content">
        <h1 class="title"> Livello 0 </h1>
        
        <div class="center" id="container">
            Questo &egrave; un livello introduttivo di spiegazione. 

            Ogni livello viene presentato con un titolo e un testo descrittivo del problema. Per superare il livello basta calcolare la soluzione e inserirla nella textbox sottostante. La soluzione &egrave; sempre unica: 
            nel caso sia errata, verr&agrave; visualizzato per qualche secondo un messaggio di errore appena sopra la textbox. Qualora sia corretta, invece, il testo del livello attuale verr&agrave; sostituito da quello 
            del livello successivo. 
 

            Inserisci "start" nella casella di testo per caricare il primo livello.
        </div>
        
        <form id="keyForm">
            <input id="key" type="hidden" value="35066637df6899fdff14125119c4b6b15ff4c88d"> </input>
        </form>
    </div>
        
    <div id="error" style="display: none;">
        
 <h2 style="text-align: center;"> Soluzione errata </h2>
    </div>
    
    <div id="formContainer">
        <form id="solutionForm">
            <input type="text" name="solution" id="solutionBox"> </input>
        </form>
    </div>
</body>

</html>
CSS:
codice:
.center
{
    margin-left: auto;
    margin-right: auto;
}

.monospaced
{
    font-family: Courier New, Consolas, Lucida Console;
}

.title
{
    font-size: 3em;
    text-align: center;
}

body
{
    font-family: Trebuchet MS, Arial;
    background-color: black;
    color: white;
}

input
{
    background-color: black;
    border: 1px solid white;
    color: white;
    border-radius: 5px;
    padding: 3px;
}

a
{
    text-decoration: none;
    color: white;
    font-weight: bold;
}

a:hover
{
    color: orange;
}

a:visited
{
    color: white;
}

#solutionBox
{
    width: 210px;
    text-align: center;
}

#content, #error
{
    width: 80%;
    max-width: 800px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

#formContainer
{
    display: block;
    width: 210px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

#levelMenu
{
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
}

#levelMenu .menuHeader
{
    text-align: center;
    margin-bottom: 20px;
}