0
I’d like to leave a div
completely aligned with a form of straight horizontal shape. However, although they are side by side, the form is "going down" when it should be aligned horizontally. How can I solve this problem? Currently it is like this:
#contato{
background-color:#ABB7B7;
margin-top:5%;
width:100%;
display: inline-block;
}
#frm{
margin-left:35%;
}
#frm input[type="text"]{
height:30px;
width:60%;
border:none;
}
#frm textarea{
width:60%;
border:none;
}
#frm input[type="submit"]{
border:none;
width:15%;
height:30px;
color:white;
background-color:black;
margin-left:45%;
}
#cont-ap{
width:30%;
}
<div id="contato">
<div id="cont-ap">
<h3>Por favor, mande nos uma mensagem, fale conosco e tire todas as suas dúvidas.</h3>
</div>
<form action="#" method="POST" id="frm">
<h3 id="msg"></h3>
<input type="text" name="mailTxt" id="mailTxt" placeholder="Seu endereço de email aqui" onblur="validaEmail(this);" />
<br /><br />
<input type="text" name="assntTxt" id="assntTxt" placeholder="O assunto do seu email" onblur="validaAssunto(this);" />
<br /><br />
<textarea id="msgMail" placeholder="A sua mensagem" onblur="validaMsg(this);"></textarea>
<br /><br />
<input type="submit" value="Enviar" name="btnMail" id="btnMail" />
</form>
</div>
And here is the Jsfiddle.
Place the form inside a
<div>
and make a rule#contato div { display: inline-block }
.– Renan Gomes
@Renan didn’t work, still below...
– Gabriel Ozzy
https://jsfiddle.net/q8ue8x5o/2/
– Renan Gomes
the problem is that in this way, half of the form is "cut" even though the width is correct.
– Gabriel Ozzy
Then the problem is the other rules you put in. You’re cutting because you’re limiting the
width
of the inputs: https://jsfiddle.net/q8ue8x5o/3/– Renan Gomes
https://jsfiddle.net/q8ue8x5o/8/
– Diego Souza