如何管理内容之间的这种无形差距?

我有一个相当简单的页面,其中包含链接到可下载文档的图像。在添加更多内容之前,我有一个部分向左浮动,另一个部分向右浮动,后面跟着一个空div来清除这两个部分。

这是一页: http://www.orientalhealthsolutions.com/forms/

以下是html:

<div class="forms-nc">
<h2>Forms for OHS Durham, NC Patients</h2>

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1402_NP_Questionnaire.pdf""><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_new-patients.jpg" alt="PDF Form" /></a>
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1402_NP_Questionnaire.pdf"">New Patient Questionnaire</a></p>
</div>

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1401_Directions_to_907_Broad_St.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_directions.jpg" alt="PDF Form" /></a>

<p><a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/OHS_CF1401_Directions_to_907_Broad_St.pdf">Driving Directions</a></p>
</div>

</div>  

<div id="forms-me">
<h2>Forms for OHS Maine Patients</h2>

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/NP_questionnaire_Maine.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_new-patients.jpg" alt="PDF Form" /></a>
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/NP_questionnaire_Maine.pdf">New Patient Questionnaire</a></p>

</div>

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/OHS-ME_Directions.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_directions.jpg" alt="PDF Form" /></a>
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/OHS-ME_Directions.pdf">Driving Directions</a></p>
</div>

</div> 


<div class="more"></div>
<h2>General Forms for All Patients</h2>

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/Herb_Cooking_instructions.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_herbs.jpg" alt="PDF Form" /></a>

<p><a href="http://www.orientalhealthsolutions.com/images/uploads/nc_downloads/Herb_Cooking_instructions.pdf">Herb Cooking Instructions</a></p>
</div>          

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/documents/Basal_Chart.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_bbt.jpg" alt="PDF Form" /></a>
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/documents/Basal_Chart.pdf">Basal Body Temperature Chart</a></p>
</div>          

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/Food_Inventory.pdf"><img class="forms" src="http://www.orientalhealthsolutions.com/images/uploads/photos/btn_food.jpg" alt="PDF Form" /></a>
<p><a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/Food_Inventory.pdf">Food Inventory Chart</a></p>

</div> 

.forms-nc               { width: 350px; height: 450px; float: left; border-right: 3px solid ; border-color: #ff2500; }
#forms-me               { width: 300px; height: 450px; float: left; margin-left: 50px;  }

#forms #main_content a  { 
    margin-left: 20px;
 } 

#forms #main_content h2 { 
    text-align: center;
 }

#forms #main_content a.title { 
    text-align: center;
 } 

body#forms-2 div.forms  { float: left; height: 1050px;  } 
.form-box               { float: left; width: 180px; height: 190px; margin-right: 20px; } 
.form-box img.forms     { margin: 5px 0 0 80px; }
.form-box p             { margin: 0 0 0 50px; padding: 0; width: 178px; height: 15px; text-align: center; }
.more                   { width: 600px; height: 5px; clear: both; }

我试过一个负边际,但它不动。我很感激你能帮我解决这个问题!