960 grid system - Difficulty achieiving desired layout with

Question

I'm currently in the process of designing part of my web page, but have encountered difficulty positioning the contact cards as they appear below:

Currently the second column of contact cards is not vertically aligned because of the follwing markup structure. The <h2 class="text200 margbottom margtop">Contact Us</h2> is 'pushing' the other 2 contact cards in the first grid 4 down vertically, but of course this is not happening in the second grid 4 as no <h2> is present. Is there any way to have the contact cards positioned at the same height so they are aligned horizontally as shown in the image above by amending my HTML markup?

Here is the link: http://www.bestcastleintown.co.uk/pg/

<div class="grid_4">
    <h2 class="text200 margbottom margtop">Contact Us</h2>
    <div class="contact_block_tiny trophy clearfix">
    <!-- content -->
    </div>
    <div class="contact_block_tiny target clearfix">
    <!-- content -->                                                
    </div>
</div>      
<div class="grid_4 omega">
    <div class="contact_block_tiny drink clearfix">     
    <!-- content -->                                    
    </div>
    <div class="contact_block_tiny editorial clearfix"> 
    <!-- content -->                                        
    </div>
</div>  

Answer 1

Is the "Contact Us" the heading for the first column or for both columns? If it is the heading for both columns, then why do you put it inside the first column? That's not where it belongs semantically, and consequentially breaks your layout.