How do I manage this invisible gap between content?

Question

I have a fairly simple page with images that link to downloadable documents. I have one section that floats left and the other that floats right followed by an empty div to clear both before I add more content.

The problem is that there is an unwanted 100px gap between the first set of forms and the General Forms section.

Here is the page: http://www.orientalhealthsolutions.com/forms/

Here is the 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""&gt;&lt;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""&gt;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"&gt;&lt;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"&gt;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"&gt;&lt;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"&gt;New Patient Questionnaire</a></p>

</div>

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/OHS-ME_Directions.pdf"&gt;&lt;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"&gt;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"&gt;&lt;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"&gt;Herb Cooking Instructions</a></p>
</div>          

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/documents/Basal_Chart.pdf"&gt;&lt;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"&gt;Basal Body Temperature Chart</a></p>
</div>          

<div class="form-box">      
<a href="http://www.orientalhealthsolutions.com/images/uploads/hi_downloads/Food_Inventory.pdf"&gt;&lt;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"&gt;Food Inventory Chart</a></p>

</div> 

Here is the css:

.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; }

I have tried a negative margin and it doesn't budge. I would appreciate any help to clear this up!

Thanks.

Answer 1

The problem is your:

<div class="more"></div>

before the General Forms section. It has a clear: both so it is always below the image on the left-hand side menu. If you disable javascript you'll see that the gap is even bigger as the menu is a lot higher.

What you could do, is wrap both forms-nc and forms-me in another div and give that div a overflow: hidden so that it wraps around both inner divs. Then you can get rid of the .more div and the General Forms section will line up directly under the wrapper div.