Question

So Let’s say I have a form with Name, Email and Message. However my “send message” button is breaking and not aligning AFTER the textarea but between the textarea and the last input! What I am doing wrong?

My HTML form snippet would be:

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

And my CSS would be:

.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;
}

Answer 1

Use clear:both;

<button style="clear:both">send</button>

Check it out at http://jsfiddle.net/yzK2k/