Suppose I have a form with fields for Name, Email, and Message. But the "send message" button is not aligning properly and appearing between the textarea and the last input field. What could be causing this issue?
Here is a snippet of my HTML form:
<form class="form-contact">
<div class="labels">
<label for="name">Name:</label><input name="name" type="text" />
<label>Email:</label><input name="name" type="text" />
<label>Message:</label><textarea name="name" type="text"></textarea>
<button>send</button>
</div>
</form>
Here is the accompanying CSS:
.form-contact {
width:100%;
margin:auto;
}
label {
text-align:right;
width:300px;
float:left;
font-size:24px;
margin-top:27px; }
.labels {
margin-top:36px;
float:
}
form {
display:inline;
margin:0;
}
input {
float:left;
margin-top:28px;
margin-left:27px;
height:23px;
line-height:23px;
font-size:23px;
color:#01a4c0;
width:309px;
}
textarea {
float:left;
margin-top:28px;
margin-left:27px;
height:23px;
line-height:23px;
font-size:23px;
color:#01a4c0;
width:309px;
height:134px;
}
button {
width:88px;
height:29px;
border:none;
background:#01a4c0;
color:#FFF;
font-size:22px;
text-align:center;
float:left;
cursor:pointer;
margin-top:13px;
display: block;
}