jquery - How to create a border that will outline div minus the margins -

jquery - How to create a border that will outline div minus the margins -

ok, have issue. using 960 gs , can see code complicated layout me @ least. part of issue supposed have 10px gutter. divs didn't. accomplish layout wanted had add together top margin of 10px of divs. needed add together hover effect padding color alter divs. can see on divs added 10px border goes around margin too. not achieving want. set class , jquery remove margin when hover on divs move/shift. 1 time again not achieving effect want. please help - either how can prepare grid scheme don't have add together top margin or how can add together padding doesn't include margins. html below set code, js , 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 work!</h2> <p>create sharepoint blog can link to, upload, , discuss work. becomes part of 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 learning , development network?</h2> </div> </article> <!-- end --> <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 @ jsfiddle, believe require. i've done i've set margin-top of 10px each element results1 class , removed previous margin-top of 10px had set different elements. since you're setting border results1_hover class, margin-top needs applied , not child-container.

jquery html css 960.gs