Alignment issue in a form container - html

Question

would you have any idea why my red alert message is split into 2 blocks? I'd like it to be one block under the main message field. See http://jsfiddle.net/z4Lg4/
Many thanks
HTML
<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>CENTRE DE dfd</h3>
<p>3, rdsfr</p>
<p> L5341 dfsf (Luxembourg)</p>
<ul id="contact">
<li><i class="icon-phone-sign blue"></i> +352 691 123.456</li>
<li><i class="icon-envelope blue"> </i>contact#dfdsf.lu</li>
<li><i class="icon-map-marker blue"></i> Plan d'accès</li>
</ul>
</div> <!-- End DIV addressbox -->
</div> <!-- End DIV block-left -->
<div class="block-right"> <h1>Formulaire de contact</h1>
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Nom" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>
<input type="submit" value="Envoyer" name="submit">
<p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
<p class="error" style="display:none;">E-mail not valid et/ou message vide</p>
</form>
</div><!-- /.contact-form -->
</div> <!-- End DIV block-right -->
</div> <!-- End DIV Block -->
</div> <!-- End DIV Contactwrapper -->
CSS
#contactwrapper {
margin-top: 30px;
padding-bottom: 30px;
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
-moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
float: left;
box-sizing: border-box;
width: 50%;
padding-right: 20px;
}
.block-right {
float: right;
box-sizing: border-box;
width: 50%;
overflow: hidden;
}
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
.contact-form input[type=text] {
float: left;
width: 200px;
}
.contact-form input[type=email] {
float: right;
width: 200px;
}
.contact-form input[type=submit] {
float: right;
}
.contact-form textarea {
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: 20px;
width: 100%;
}
/*************************************************************
/*************************************************************
* FORMS
*************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
border-top: 1px solid transparent;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid transparent;
border-left: 1px solid #d2d2d2;
color: #7c7c7c;
font-family: 'Arial', sans-serif;
padding: 6px 8px;
resize: none;
}
form input:focus,
form textarea:focus {
background: #d5d5d5 none;
border: 1px solid red;
outline: none;
}
form input[type=submit] {
background: #0064C4 url('../images/form-caret.png') right center no-repeat;
border: 0;
color: #fff;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: normal;
padding: 8px 50px;
text-transform: uppercase;
}
.success
{
display:none;
display: block;
margin: auto;
width: 100%;
overflow: hidden;
text-align:center;
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: 1px;
padding-top: 3px;
padding-bottom: 3px;
background: #99CB97;
}
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
padding: 3px 10px 3px 10px;
top: 10px;
}

Answer 1

check the js fiddle
http://jsfiddle.net/z4Lg4/
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
top: 72px;
position:absolute;
}

Answer 2

made the changes:
css:
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
top: 100px;
margin-left:35px;
position:absolute;
}
Fiddle