Ciao a tutti, ho un problema che mi sta facendo diventare matto

Ho 4 div affiancati orizzontalmente ed il 3° div ha altri 2 div verticali sotto di lui.

lo scroll orizzontale funziona bene (il passaggio fra i 4 div è perfetto) ma in quelli verticali ho un problema.

i div che "scrollano" non occupano tutta la pagina ma hanno dei limiti di margin che ho impostato in alto. il problema è che nello scroll verticale i div che scorrono non seguono questo margine ma vanno a collocarsi al bordo alto della pagina superando il margine che avevo impostato.

Forse l'ho spiegato un pò a cavolo quindi vi posto il codice sperando che qualche anima pia me lo risolva

Allora questo è il codice dello script verticale/orizzontale.
codice:
<script type="text/javascript">
/*orizz*/
            $(function() {
                $('a.hmove').bind('click',function(event){
                    var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                    }, 800);
                    event.preventDefault();
                });
            });
/*vert*/
$(function() {
                $('a.vmove').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 800,'easeInOutExpo');
                    event.preventDefault();
                });
            });
</script>
questo è quello della pagina:
codice:
<div id="corpo"> 
     <div class="section" id="section1"> 
          <div class="section_content"> 
                   <div class="icons"> 
                             [img]images/bio.png[/img] 
                             [img]images/works.png[/img] 
                             [img]images/cont.png[/img]
                   </div> 
           </div> 
      </div> 
      <div class="section" id="section2"> 
           <div class="section_content"> ggggggggggggggggggg 
           </div> 
      </div> 
      <div class="section" id="section3"> 
           <div class="section_content"> 
                  <div id="workschoose"> 
                         <div class="work_cont" id="section5"> 
                                 6 
                                 7 
                         </div>
                         <div class="work_cont2" id="section6"> 
                                 5 
                                 7 
                         </div> 
                         <div class="work_cont" id="section7"> 
                                 5 
                                 6 
                         </div> 
                   </div> 
          </div> 
       </div> 
       <div class="section" id="section4"> 
           <div class="section_content"> 
           </div> 
   </div>
</div>
questo è il css.
codice:
 
body { 
margin:0; 
padding:0; 
background:#cccccc; 
} 

#master { 
width:100%; 
height:100%; 
margin:0; } 

#corpo { 
position:relative; 
width:400%; 
height:450px; 
margin:8% auto; 
float:left; 
border:1px solid blue; 
overflow:hidden; } 

.icons { 
width:350px; 
margin:12% auto; } 

.section { 
position:relative; 
margin:0px; 
bottom:0px; 
width:25%; 
float:left; 
height:100%; 
overflow:hidden; } 

.section_content { 
width:65%;
margin:0 auto; 
height:450px; 
padding:0px; 
border:1px solid blue; }

#workschoose { 
position:relative; 
height:2250px; 
width:100%; 
float:left } 

.work_cont { 
position:relative; 
height:450px; 
width:100%; 
left:0; 
margin: auto; 
border:1px solid blue; } 

.work_cont2 { 
height:450px; 
width:100%; 
left:0; margin: 
450px auto; 
border:1px solid blue; }
spero che qualcuno possa aiutarmi sono davvero bloccato