Fluid grid css not positioning divs

Hi,

I've been having this problem for days now and I'm in need of help.

The css:-

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
*/
body {background-color: white;}
img, object, embed, video {
max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile:  4;
dw-num-cols-tablet:  8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;

Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design

and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/

.fluidList {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
top: 25px;
}

/* Mobile Layout: 480px and below. */
 
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
top: 25px;
}

#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout.
*/

@media only screen and (min-width: 769px) {

.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
overflow:auto;

}

 

#stage2 {
position: absolute;
  left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
top: 35px;
z-index: 0;
}

#stage3 {
position: absolute;
  left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
top: 210px;
z-index: -1;
}

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}
}

the HTML:-

I want the "stage3" div to start 35px from the top of the web page and the subsequent divs to follow on below it. When I run it the "stage" div starts about 140px from the top of  the  page  and the subsequent divs follow on below it.. no matter what I change the top px to the divs don't move at all.  Any help would be greatly appreciated.