Good evening,
I used 'float: right;' to put some fields in a side-by-side form, but they go down one field. 'Full Name' and 'Date of Birth' should be side by side, but the date field descends.
Picture:
Codes:
Registrationpage link
CSS link
How to solve?
I would not advise using this form to align the fields in the form, I think the most consistent way would be for each div that contains a label and an input, have 50% and float left ... this way you would not lose the setting when you changed the screen size. But if you want to keep this format the ideal would be you declare the div that goes right before the one that goes on the left inside your html, or else do the same thing you did on the right, to the left, declaring them as float left. The idea would also be to avoid using the same id for more than one object, since by convention the id is unique. It could even use right class, that would be no problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Cadastro</title>
<style>
body {
border-top: 50px solid #45543D;
margin: 0;
text-align: center;
}
h1, h2, h3, h4 {
font-weight: inherit;
color: #363636;
}
hr {
border: 0;
border-top: 1px solid #ddd;
}
#corpo {
margin: 50px 150px;
}
#formulario {
text-align: left;
margin: 0 0px;
}
#formulario .direita {
float: right;
width:50%;
}
#formulario .esquerda {
float: left;
width:50%;
}
#formulario label {
line-height: 30px;
text-align:left;
color:#363636;
}
#formulario input {
padding: 9px;
border: 1px solid #CCCCCC;
background: #E8EFE4;
border-radius: 4px;
color:#363636;
}
#formulario select {
padding: 9px;
border: 1px solid #CCCCCC;
background: #E8EFE4;
border-radius: 4px;
color:#363636;
}
#formulario .botao {
cursor: pointer;
text-align: left;
margin: 0 0 0 0;
color: #FFF;
background-color: #45543D;
}
#formulario .botao:hover {
background-color: #354030;
}
#copy {
color: #363636;
text-align: center;
margin: 50px 150px;
}
</style>
</head>
<body>
<!-- Corpo -->
<div id="corpo">
<!-- Formulário -->
<div id="formulario">
<form action="insere.php" method="post">
<div class="data direita" id="">
<label for="data_de_nascimento">Data de Nascimento:</label><br>
<input type="text" size="25" placeholder="__/__/____">
</div>
<div class="esquerda" id="">
<label for="nome">Nome Completo:</label><br>
<input type="text" size="35" placeholder="Nome Completo">
</div>
<div class="rg esquerda" id="">
<label for="rg">RG:</label><br>
<input type="text" placeholder="00.000.000-0">
</div>
<div class="cpf direita" id="">
<label for="cpf">CPF:</label><br>
<input type="text" size="25" placeholder="000.000.000-0">
</div>
<div class="esquerda" id="">
<label for="filiacao_pai">Pai:</label><br>
<input type="text" size="30" placeholder="Nome do Pai">
</div>
<div class="direita" id="">
<label for="filiacao_mae">Mãe:</label><br>
<input type="text" size="25" placeholder="Nome da Mãe">
</div>
<div class="esquerda" id="">
<label for="escolaridade">Escolaridade:</label><br>
<select name="escolaridade" id="">
<option value="Selecione">Selecione</option>
</select>
</div>
<div class="direita" id="">
<label for="profissao">Profissão:</label><br>
<input type="text" size="25" placeholder="Profissão">
</div>
<div class="telefone esquerda" id="">
<label for="telefone">Telefone:</label><br>
<input type="text" placeholder="0000-0000">
</div>
<div class="celular direita" id="">
<label for="celular">Ceular:</label><br>
<input type="text" size="25" placeholder="(00) 0000-0000">
</div>
<div class="esquerda" id="">
<label for="email">E-mail:</label><br>
<input type="text" size="35" placeholder="[email protected]">
</div>
<br>
<input type="submit" value="Cadastrar" class="botao">
<input type="reset" value="Limpar Campos" class="botao">
</form>
</div>
<!-- /Formulário -->
</div>
<!-- /Corpo -->
</body>
</html>