CSS troubles with a 2 columns layout for a contact form

Question

I'm using a wordpress plugin called contact form 7 to create my contact forms. I did a 2 columns layout with CSS that looks ok as it is. But when you hit the SEND button, the validation message or error message, that appears after sending a message, is displayed at the wrong place. It should be displayed right under the form (ir right under the SEND button.

Actually the message is displayed right under the form because for some reason my labels, text fields are considered out of the form. In Chrome debug mode I found that the form height consisted of my:

<div id="contact-email">
<h2>Contact form</h2>
</div> 

and <p id="contact-intro"></p>

I don't understand why it doesn't go all the way down to the SEND button. The js is a bit long so here is a jsfiddle if you want to check the js and css http://jsfiddle.net/sd82m/ I think it's better to have a look at my testing website so you can click on the SEND button (you can't do that on jsfiddle) http://mywptestsite.is-great.org/contact-form/ Thanks -K

Answer 1

.wpcf7-response-output {
    clear: both;
}

So that it will clear both the left-floated and right-floated divs.

Answer 2

Try to add this property to the CSS of all your divs that contain parts of the form:

overflow:hidden;

Answer 3

Try,

.wpcf7-response-output {
float: left;
margin-left: 452px;
width: 459px;
}