Ok, I have an issue. I am using the 960 gs and as you can see from the code it is a complicated layout for me at least. Part of my issue was everything was supposed to have a 10px gutter. But some divs didn't. So to achieve the layout I wanted i had to add a top margin of 10px to some of the divs. Well then I needed to add a hover effect padding color change to the divs. Well as you can see on the divs where I added 10px a border goes around the margin too. Not achieving what I want. I set up a class and some jquery where it would remove the margin but then when you hover over those divs they move/shift. Again not achieving the effect that I want. Please help - either how can I fix my grid system so I don't have to add a top margin or how can I add a padding that doesn't include my margins. My HTML is below but I put all my code, js and css on jsfiddle, please see: http://jsfiddle.net/penrysh/mr99962t/
<div class="page">
<div class="container_14">
<div class="grid_6 alpha omega">
<div class="grid_6 alpha">
<article class="grid_4 alpha results">
<div id="bulletin" class="tooltip" title="Tip1">
<h2>Bulletin Board</h2>
<p></p>
</div>
</article> <!-- end Bulletin Board -->
<article class="grid_2 omega results">
<div id="take5" class="tooltip" title="Tip2">
<ul>
<li><h3>Take 5</h3></li>
<li><img src="http://placehold.it/75x75" alt="Learning Break icon" /></li>
<li><a href="#take5Box" title="Take 5 Learning Break" class="lightbox">Learning Break</a></li>
<div id="take5Box">
<h3>Take 5</h3>
<p>More content...</p>
<a href="#">Take 5</a>
</div>
</ul>
</div>
</article> <!-- end Take 5 -->
<article class="grid_2 omega results1">
<div id="longTerm" class="tooltip" title="Tip3">
<ul>
<li><h3>Long Term</h3></li>
<li><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></li>
<li><a href="#longTermBox" title="Long Term Learning" class="lightbox">Learning</a></li>
<div id="longTermBox">
<h3>Long Term Learning</h3>
<p>More content...</p>
<a href="#">Long Term Learning</a>
</div>
</ul>
</div>
</article> <!-- end Long Term -->
<div class="clear"></div>
<article class="grid_6 alpha omega results1">
<div id="career" class="tooltip" title="Tip4">
<h2>Career Insight: Highlight your work!</h2>
<p>Create a Sharepoint blog where you can link to, upload, and discuss your work. It all becomes part of your professional portfolio.</p>
</div>
</article> <!-- end Career Insight -->
</div>
</div>
<div class="grid_8 omega">
<div class="grid_8 omega">
<article class="grid_8 alpha omega results">
<div id="whatIs" class="tooltip" title="Tip5">
<h2>What is the Learning and Development Network?</h2>
</div>
</article> <!-- end What is -->
<div class="clear"></div>
<article class="grid_6 alpha results1">
<div id="featured" class="tooltip" title="Tip6">
<h2>Featured Courses</h2>
<table>
<tbody>
<tr>
<td><img src="http://placehold.it/75x75" alt="Health Care 101" /></td>
<td><a href="#"></a></td>
</tr>
<tr>
<td><img src="http://placehold.it/75x75" alt="Our Values" /></td>
<td><a href="#">Our Values</a></td>
</tr>
</tbody>
</table>
</div>
</article> <!-- end Featured courses -->
<article class="grid_2 omega results1">
<div id="kl" class="tooltip" title="Tip7">
<ul>
<li><img src="http://placehold.it/75x75" alt="" /></a></li>
<li><a href="#klBox" title="" class="lightbox"></a></li>
<div id="klBox">
<h3></h3>
<p>More content...</p>
<a href="#"></a>
</div>
</ul>
</div>
</article> <!-- end KL -->
<article class="grid_2 omega results1">
<div id="myLearning" class="tooltip" title="Tip8">
<ul>
<li><img src="http://placehold.it/75x75" alt="" /></li>
<li><a href="#myLearningBox" title="M" class="lightbox">My Learning</a></li>
<div id="myLearningBox">
<h3></h3>
<p>More content...</p>
<a href="#"></a>
</div>
</ul>
</div>
</article> <!-- end -->
</div>
</div>
<div class="clear"></div>
</div> <!-- end Container -->
</div> <!-- end Page -->
Please take a look at this jsFiddle, I believe this is what you require. What I've done is that I've set a margin-top of 10px for each element with the results1 class and removed all the previous margin-top of 10px which you had set for different elements. Since you're setting the border for the results1_hover class, the margin-top needs to be applied to it as well and not to its child-container.