Divs Won't Line Up

Question

www.acemon.com
The site passes validation but doesn't display properly.
Underneath the header are two divs, "introtext1" and "introtext2" and even though the code for each is identical (aside from the left margin), they won't line up at the top.
There are four divs labelled "text", and when I start to add words to each, the adjoining div "clickhere" drops downward depending on the amount of words within the "text" divs.
Maybe my problem is only getting two hours sleep and I'm missing something obvious.
Thanks.

Answer 1

Add float: left; to your 'introtext2' css and amend the margin-left to 20px (as below)
#introtext2 {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #6F6;
float: left;
    height: 300px;
    width: 430px;
    margin-top: 20px;
margin-left: 20px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
The reason your 'clickhere' box moves is because you have your html code in the wrong order. It should be as below (note the 'text' closing </div> comes before the opening  'clickhere' <div> tag:
By the way you have your <!--  --> comments for the closing </div> tags in the wrong place too. Below they are in the correct place.
<div class="choice">
       <div class="text">
<p><strong>The Basic Plan - $75 Complete</strong></p>
       <p>You get three pages featuring your house. The first page shows the front of your house, along with a description of features. The second page feature six pop-up windows, each with various rooms of your house. When someone clicks on an image, they see a larger version of the photo, along with a detailed description. The third page offers contact information, a MapQuest link to let prospective buyers find your house, and a space for your realtor's business card.</p>
       </div><!--end of .text-->
       <div class="clickhere">
       <a href="basic-1.html">
       <img src="Images/Click Sample.png" alt="Basic" width="150" height="50" /></a>
</div><!--end of .clickhere-->
</div> <!--end of .choice-->