I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on the right side.
How can I fix this problem?
Check out the code on 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;
}