2

Quero colocar o formulário de contato com os inputs ao lado esquerdo e o textarea ao lado direito conforme na imagem abaixo, consigo fazer o resultado esperado com o float:left porém assim o meu layout acaba quebrando.

inserir a descrição da imagem aqui

Como conseguir o resultado esperado sem o float?

Segue o código que utilizei:

.contact{
  float: left;
  width: 49.5%;
}

input, textarea{
  border: 1px solid lightblue;
  width: 100%;
}

textarea{
  height: 65px;
  resize: none;
}

.left{
  margin-right: .5%;
}

.right{
  margin-left: .5%;
}
  <div class="contact left">
    <input type="text" name="nome" autocomplete="name" placeholder="Nome" required>
    <input type="text" name="empresa" autocomplete="organization" placeholder="Empresa">
    <input type="text" name="telefone" autocomplete="tel-national" placeholder="Telefone" required>
  </div>
  <div class="contact right">
    <textarea name="mensagem" placeholder="Mensagem" required></textarea>   </div>

1 Resposta 1

1

Faz com Flexbox que por default já coloca um elemento ao lado do outro.

Vc nem vai notar a diferença. parece que ainda está com float, mas só precisei colocar todo o conteúdo dentro de uma div e colocar o display:flex OBS: coloquei box-sizing:border-box para o valor das bordas não se somarem e vc ficar com uma barra de rolagem horizontal indesejada na página

Veja como ficou o resultado.

* {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.forme {
  display: flex;
}
.contact{
  width: 49.5%;
}
input, textarea{
  border: 1px solid lightblue;
  width: 100%;
}
textarea{
  height: 65px;
  resize: none;
}
.left{
  margin-right: .5%;
}
.right{
  margin-left: .5%;
}
<div class="forme">
  <div class="contact left">
    <input type="text" name="nome" autocomplete="name" placeholder="Nome" required>
    <input type="text" name="empresa" autocomplete="organization" placeholder="Empresa">
    <input type="text" name="telefone" autocomplete="tel-national" placeholder="Telefone" required>
  </div>
  <div class="contact right">
    <textarea name="mensagem" placeholder="Mensagem" required></textarea>
  </div>
</div>

5
  • Boa, como mantenho o CSS e removo essa barra de rolagem inferior? Commented 18/05/2018 às 18:14
  • @LaércioLopes editei a resposta, olha lá a OBS
    – hugocsl
    Commented 18/05/2018 às 18:15
  • Perfeito, vou aceitar assim que permitir. Obrigado. Commented 18/05/2018 às 18:16
  • Se quiser colocar margem na direita e esquerda use a sua classe .contact que fica bom tb.
    – hugocsl
    Commented 18/05/2018 às 18:16
  • @LaércioLopes Vlw jovem!
    – hugocsl
    Commented 18/05/2018 às 18:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .