float elements of contact form to different sides

Question

I have a contact form that I would like all elements to be floated to the left and aligned vertically, with the exception of the "message" box and submit button which should be floated and aligned on the right.

Currently, all fields seem to be flowing horizontally. How can I remedy?

jsfiddle

<div id="contact">
        <div id="contact-form" class="clearfix">  
        <h2><img src="img/chat.png" alt="contact frsh studio"></h2> 
        <ul id="errors" class="">  
            <li id="info">There were some problems with your form submission:</li>  
        </ul>  
        <p id="success">Thanks for your message! We will get back to you ASAP!</p>  
        <form method="post" action="process.php"> 
            <input type="text" id="name" name="name" value="" placeholder="NAME" required="required" autofocus="autofocus" />  
            <input type="email" id="email" name="email" value="" placeholder="EMAIL" required="required" />   
            <select id="enquiry" name="enquiry">  
                <option value="refrsh">Brand REFRSH</option>  
                <option value="consult">Brand Consultation</option>  
                <option value="support">Just a Hello!</option>  
            </select>  
            <textarea id="message" name="message" placeholder="MESSAGE" required="required" data-minlength="20"></textarea>  
            <span id="loading"></span>  
            <input type="submit" value="Holla!" id="submit-button" />  
            <p id="req-field-desc"><span class="required">*</span> kind of necessary</p>  
        </form>  
    </div>  
    </div><!-- end contact -->


#contact-form { 
    width: 690px;
    padding:20px;  
    margin: 50px auto;    
    position:relative;  
}   
#contact-form h2 {  
    margin-bottom:20px;
    margin-top:40px;
    text-align: center;  
}  
#contact-form input,  
#contact-form select,  
#contact-form textarea,  
#contact-form label {  
    font-size:15px;  
    margin-bottom:2px;
}  
#contact-form input,  
#contact-form select,  
#contact-form textarea {
    float: left !important;  
    width:320px;   
    margin-bottom:20px;  
    padding:4px;  
}    
#contact-form textarea {  
    height:150px;  
    resize: none;  
}
#contact-form #message {
    clear: both;
    float: right !important;
}
#contact-form label {  
    display:block;  
}  
#contact-form .required {  
    font-weight:bold;  
    color:#F00;  
}  
#contact-form #submit-button {  
    width: 100px;  
    border: 2px solid #515151;  
    display:block;  
    float:rightright;  
    margin-bottom:0px;  
    margin-right:6px; 
}   
#contact-form #loading {  
    width:32px;  
    height:32px;  
    background-image:url(../img/loading.gif);  
    display:block;  
    position:absolute;  
    rightright:130px;  
    bottombottom:16px;  
    display:none;  
}  
#errors {  
    border:solid 1px #E58E8E;  
    padding:10px;  
    margin:25px 0px;  
    display:block;  
    width:437px;  
    -webkit-border-radius:8px;  
    -moz-border-radius:8px;  
    border-radius:8px;  
    background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;  
    display:none;  
}  
#errors li {  
    padding:2px;  
    list-style:none;  
}  
#errors li:before {  
    content: ' - ';  
}  
#errors #info {  
    font-weight:bold;  
}  
#errors #info:before {  
    content: '';  
}  
#success {  
    border:solid 1px #83D186;  
    padding:25px 10px;  
    margin:25px 0px;  
    display:block;  
    width:437px;  
    -webkit-border-radius:8px;  
    -moz-border-radius:8px;  
    border-radius:8px;  
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;  
    font-weight:bold;  
    display:none;  
}  
#errors.visible, #success.visible {  
    display:block;  
}  
#req-field-desc {  
    font-style:italic;  
}  
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */  
input:required, textarea:required {  
    -moz-box-shadow:none;  
    -webkit-box-shadow:none;  
    -o-box-shadow:none;  
    box-shadow:none;  
}  
/* Normalize placeholder styles */  
/* chrome, safari */  
::-webkit-input-placeholder {  
    color:#CCC;  
    font-style:italic;  
}  
/* mozilla */  
input:-moz-placeholder, textarea:-moz-placeholder {  
    color:#CCC;  
    font-style:italic;  
}  
/* ie (faux placeholder) */  
input.placeholder-text, textarea.placeholder-text  {  
    color:#CCC;  
    font-style:italic;  
}

Answer 1

Updated JSFiddle: http://jsfiddle.net/jF49S/1/

As I mentioned in my comment, don't forget to utilize the CSS clear definition when dealing with float.

For instance, all that was needed here was a clear: left;.

#contact-form input,  
#contact-form select,  
#contact-form textarea {
    clear:left;
    float: left;
    width:320px;   
    margin-bottom:20px;  
    padding:4px;  
}   

I also rearranged some of the HTML. Sometimes this is required to obtain the desired layout. For instance, I moved <textarea> to the beginning of the form in order for it to show up correctly.

Remember that, usually, there are many ways to accomplish a layout with HTML and CSS; my suggestion was just one way.

There are many articles and tutorials on float but here's a good primer: http://css-tricks.com/all-about-floats/