Держите DIV на месте, когда DIV рядом с ним изменяется в размере

Question

Итак, у меня есть div, который заполняется через AJAX, и когда он меняет размер, div рядом с ним перемещается вниз с нижним краем div рядом с ним.Как получить так, чтобы div справа оставался на месте?

<div class="body">
        <div class="slection">
            <div class="selector">
                <select name="users" onchange="showUser(this.value)">
                <option value="Select day...">Select day...</option>
                <?php
                $pathToMe = dirname(__FILE__);
                $path = $pathToMe . "/days/";
                $handle=opendir($path);
                    while ($file=readdir($handle))
                    {
                        if (($file == ".") || ($file == "..")){
                    }
                        else echo "\t<option value='".$file."'>".$file."</option>\n";
                    }
                ?>
                </select> 
          </div>
          <div id="content"></div>
          </div>
          <div class="sms">
            <div style="text-align:center">
                Send SMS to client
            </div>
        <div style="text-align:center">
                <div id="contact_form">  
                    <form name="contact" action="">  
                      <fieldset>  
                        <input type="text" name="number" id="number" size="14" value="Number" class="text-input" />  
                      <br /><br />
                        <textarea type="text" name="message" id="message" value="Message" class="text-input"></textarea>  


                        <br />  
                        <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
                      </fieldset>  
                    </form>  
</div>  
</div>
      </div>
      </div>

И CSS:

.header {
    height:30px;
}

.body {
    min-width:400px;
    max-width:700px;
    min-height:200px;
    margin-left:auto;
    margin-right:auto;
    width:500px
}

.sms {
    float:right;
    margin-top:-20px;
}

.selection {
    float:left;

}

Живой пример здесь .

Answer 1

добавить

pre{
width:200px;
float:left;
}

на ваш CSS.

В настоящее время pre занимает ширину всей области. Определение его шириной 200px по-прежнему не приведет к тому, что другой элемент достигнет того же уровня, с которым он не display:inline;, поэтому вам также нужен float.