[Resolvido] colocar campo textarea ao lado direito dos outros inp

[Annyh 4]

tenho um formulario de contato, normal, nada fora do normal, tenho três inputs do tipo text um embaixo do outro, e gostaria que o textarea ficasse ao lado direito dos outros inputs, fiz isso usando o position: absolute, mas ai ocorreu um outro problema, minha validação ela fica oculta, mas quando o usuário clica em enviar o formulário e não estiver tudo ok mostra a mensagem do respectivo erro, e quando a mensagem aparece os inputs de texto descem normal mas o textarea fica no mesmo lugar, logicamente, e não consigo arrumar de nem um outro jeito.

 

meu css esta assim:

form {
font: 13px Verdana, Arial, Helvetica, sans-serif;
width: 747px;
}

fieldset {
background: #f5f5f5;
border: 1px solid #686868;
}

legend {
background: #686868;
color: #fff;
font-size: 15px;
font-weight: bold;
margin-left: 15px;
padding: 5px 10px;
text-transform: capitalize;
}

span {
display: block;
margin: 10px 15px;
width: 345px;
}

label {
color: #333;
display: block;
float: left;
text-transform: capitalize;
width: 345px;
}

input, textarea {
background: #fff;
border: 1px solid #686868;
color: #4a4a4a;
font: 13px Verdana, Arial, Helvetica, sans-serfi;
height: 30px;
padding: 0 5px;
width: 330px;
}

textarea {
height: 140px;
padding: 5px;
resize: none;
width: 314px;
}

.msn {
display: block;	
width: 325px;
}

button {
background: #686868;
border: none;
color: #fff;
cursor: pointer;
font: 13px Verdana, Arial, Helvetica, sans-serfi;
margin: 10px 0 15px 15px;
padding: 5px 10px;
}

 

e meu xhtml assim:

<div id="status" style="background: #fd8383; color: #fff; display: none; margin: 0 0 10px 0; padding: 5px;"></div>

<form method="post" action="javascript:func()" id="formContato">
<fieldset>
	<legend>informe seus dados</legend>
	<span>
		<label for="nome">nome</label>
		<input type="text" name="formNome" id="formNome" />
	</span>
	<span>
		<label for="email">email</label>
		<input type="text" name="formEmail" id="formEmail" />
	</span>
	<span>
		<label for="assunto">assunto</label>
		<input type="text" name="formAssunto" id="formAssunto" />
	</span>
	<span class="msn">
		<label for="mensagem">mensagem</label>
		<textarea name="formMensagem" id="formMensagem"></textarea>
	</span>
	<button name="formEnviar" class="formContato">enviar</button>
</fieldset>
</form>

[Guilherme Oderdenge 42]

Olá, Annyh.

 

Tente dar um float: left com position: relative tanto nos inputs, quanto no textarea.

 

Depois, para separar os dois, utilize margin.

 

Abraços! ;)

[Annyh 4]

valeu Guilherme, deu certo, coloquei o float como você disse, mas coloquei no span, ja que o mesmo estava englobando o label e o input, e no textarea como você tambem disse usei margin...

 

valeu pela ajuda... abraços.