I can not leave words next to form

Question

I can not leave words next to form

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I would like to leave a div completely aligned with a form straight horizontally. However, although they are side by side, the form is "descending" when it should be aligned horizontally. How can I solve this problem? Currently it looks 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's the JSFiddle .

html html5 css css3

asked by anonymous 06.03.2016 / 22:27

2 answers

IF within the while PHP / MYSQL How to call an Html.Action ("my_page") via jquery?

score 1 · Answer 1

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

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

score 1 · Answer 2

I've altered the structure of your html and how you built your css. I split the page into a% div and within that I put two more div's contato and cont-ap . Then I just cite the css by putting formulario on the two inner elements and a display:inline-block on the vertical-align: top div. I also removed the% dynamic% because the layout was very strange.

Finally it looks like this:

link

This has the centralized internal divs

link

#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>