<p> element pushing down form - css

Question

I've been trying to fix this the past hour, I just can't figure it out. The last <p> element in my main div is pushing down my form and I don't know why. How do I get rid of that white space above the form?
Here's the live site
CSS:
div.main {
h1 {width: 50%;}
.number {width: 46%;}
p {width: 50%; margin: 2% 0 2% 2%; float: left; }
}
form.contact {
width: 46%;
float: right;
margin: 0;
input, textarea {display: block; padding: 5px; margin: 5px 0; width: 95%;}
textarea {height: 130px;}
}
HTML:
<div class="main clearfix">
<h1>Glasgow Joiner</h1><span class="number">01698 818209</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
<form class="contact">
<h2>Get a FREE Quote Today!</h2>
<label for="name">Name:</label>
<input type="text" name="name">
<label for="email">Email Address:</label>
<input type="text" name="email">
<label for="phone">Telephone Number:</label>
<input type="text" name="phone">
<label for="message">Message:</label>
<textarea name="message"></textarea>
<input type="submit">
</form>
</div>

Answer 1

It is floating to the right of the last cleared element. Put the form directly after the H1 and span and you'll see it at the top-right.

Answer 2

Better approach is wrap paragraphs with divs, and set float: left; to both elements:
<div class="main clearfix">
<div class="content">
<h1>Glasgow Joiner</h1><span class="number">01698 818209</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
</div>
<div class="right">
<form class="contact">
<h2>Get a FREE Quote Today!</h2>
<label for="name">Name:</label>
<input type="text" name="name">
<label for="email">Email Address:</label>
<input type="text" name="email">
<label for="phone">Telephone Number:</label>
<input type="text" name="phone">
<label for="message">Message:</label>
<textarea name="message"></textarea>
<input type="submit">
</form>
</div>
</div>
It will be easier to add more elements for sidebar. And for future I suggest use something like grind css template.

Answer 3

If you remove all of your margin, u may logically figure out why!
Put all of your p tags into a div and make it 50% float left
Name it after me:
<div id="left_keo">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="right_keo">
<form>
...
</form>
</div>
There are 100000000 and 1 ways of doing it, but 1st, you need a stable layout, 2nd: you need to keep your code clear and clean!!!
That's the very very basic of layouting.

Answer 4

The reason it is doing this is because:
Try visualizing each individual paragraph as a gigantic letter. In a normal book, the letters would go directly to its right, and go to the next line when it runs out of space. If the paragraph has no space to go to the right, then it will go below. However, the form is small enough to go to the right of it.
Try putting the form and the text in two different divs, then have the paragraph-div and the form-div both float left.
Or, you can make another div inside the main clearfix, and put the form inside that.
Either way, they should both float left, and putting the form and paragraphs inside the same div next to each other can result in these glitches.