I can’t leave words side by side of the form

Asked

Viewed 89 times

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.

html css html5 css3

  • Place the form inside a <div> and make a rule #contato div { display: inline-block }.

  • @Renan didn’t work, still below...

  • https://jsfiddle.net/q8ue8x5o/2/

  • the problem is that in this way, half of the form is "cut" even though the width is correct.

  • 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/

  • https://jsfiddle.net/q8ue8x5o/8/

Show 1 more comment

2 answers

1

The margin-left you added to #frm input[type="submit"] and in the #frm ta making it break the line. But if you leave the id #cont-ap this way solves your problem:

#cont-ap{
  width:30%;
  float:left;
}

1

I changed the structure of your html and the way you built your css. I divided the page into a div contato and inside this I put two more div’s cont-ap and formulario. Then I just figured out the css by putting display:inline-block in the two internal elements and a vertical-align: top in the div cont-ap. I also removed the width's dynamic, because it was very strange the layout.

At last it was like this:

This has centralized internal divs

#contato{
	background-color:#ABB7B7;
	margin-top:5%;
}

.formulario{
  	display: inline-block;
    width:250px;
}


.formulario input[type="text"]{
	height:30px;
	width:250px;
	border:none;
}

.formulario textarea{
	width:250px;
	border:none;
}

.formulario input[type="submit"]{
	border:none;
	height:30px;
	color:white;
	background-color:black;
	float: right;

}

#cont-ap{
  display:inline-block;
  vertical-align: top;
  width:39%;
}
		<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>
            <div class="formulario">
			<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>
		</div>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.