Problem with textarea in fluid layout

I have the following:

HTML:

<div class="sessoes">
<div class="formContato">
  <h1 class="h1Centralizado">Fale Conosco</h1>
  <form id="contato" action="contato.php" method="post">
    <input type="hidden" name="acao" value="enviar" />
    <br />
    <div class="contatoEsquerdo">
      <label class="labelPequeno" style="color:#FFF;">Assunto</label>
      <select style="width: 212px; height:52px;" id="assunto" name="assunto" required>
        <option value="">Escolha o assunto</option>
        <option value="1">Quero Comprar</option>
        <option value="2">Quero Vender</option>
        <option value="3">Informação sobre Imóvel</option>
        <option value="4">Elogio</option>
        <option value="5">Outro</option>
      </select>
      <br />
      <br />
      <div class="qual" style="display:none">
        <label class="labelPequeno" style="color:#FFF;">Qual?</label>
        <input type="text" class="typeTextMedio" maxlength="200" id="qual" name="qual" />
        <br />
        <br />
      </div>
      <label class="labelPequeno" style="color:#FFF;">Nome</label>
      <input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required />
      <br />
      <br />
      <label class="labelPequeno" style="color:#FFF;">Telefone</label>
      <input type="tel" class="typeTextMedio" maxlength="14" id="telefone" name="telefone" />
      <br />
      <br />
      <label class="labelPequeno" style="color:#FFF;">Email</label>
      <input type="email" class="typeTextMedio" required maxlength="200" id="email" name="email" />
      <br />
      <br />
    </div>
    <div class="contatoDireito">
      <h1 style="text-align:center; width:100%;">Descrição</h1>
      <br />
      <textarea name="descricao" id="descricao" cols="60" rows="15"></textarea>
      <br />
      <br />
    </div>
    <div style="clear:both; width:100%; text-align:center;">
      <input type="submit" value="Enviar" />
      <br />
      <br />
    </div>
  </form>
</div>
<div style='text-align:center'><a href='javascript:history.go(-1)'><img src='_img/voltar.png' title='Voltar' /></a><br />
  <br />
</div>

jQuery:

// JavaScript Document
$(document).ready(function() {

  $("#assunto")
    .change(function () {
        if(this.value == 5) {
              $(".qual").css("display", "block");
              $("#qual").prop("required",true);
        } else {
              $(".qual").css("display", "none");
              $("#qual").prop("required",false);
        }     
  })


  $("#descricao").htmlarea();  


  $("#contato").on("submit", function (){
    if($('#descricao').val() == "")   {     //verifica apena o texto
        alert("Descrição não está preenchida!");
        $('#descricao').siblings().each(function(){
          if ($(this).children('iframe').length){
             var iframe=$(this).children('iframe')[0];
             iframe.contentWindow.focus();
          }
       });
       return false;
    } 
  }); 

});  

CSS:

.sessoes
{   
    /*width: 97.65625%;*/
    width:1000px;
} 

.contatoEsquerdo, .contatoDireito {
    display:inline-block;
    vertical-align:top;
    padding:0; 
    margin:0 auto;
}

.contatoEsquerdo {
    width:40%; 
}

.contatoDireito {
    width:58%; 
}

@media screen and (min-width: 0px) and (max-width:320px)  {

    .contatoEsquerdo, .contatoDireito, {
        width:100%;
    }

    .textarea {
        width:auto;
    }

}

Well, on screen above 1000px everything ok! But when I play 320x480 mobile screen, then I can not play the textarea down the other fields and it's a mess;

Please see this at link

Detail: On screens above 1000px the error does not occur. Only with textarea is giving this problem. With other elements (type li's menu) does not occur. That is, it does not go down.