Scroll exageradamente desfasado

[DoHITB]

Buenas!
Tengo un pequeño problema con unos div y un scroll... a ver si consigo que lo entendáis, jeje

Tengo una serie de div colocados en columna (a modo de tabla), pero por cuestiones de display (creo), cada div tengo que cambiarle el top, porque sino me salen en "escalera" hacia abajo.

Esta parte está arreglada, los div están colocados milimétricamente mediante una función php que calcula el desfase que se le tiene que aplicar.

El problema está en que hace poco me dijeron (desde la empresa en la que trabajo) que estaría bien poner un scroll que englobe los div anteriores (son div largos, de 890px) y con un cierto offset.

Lo del offset lo solucioné con JS y poniendo id en unos div hijos de éstos últimos.

El problema real que no se como arreglar es que el scroll que me sale es inmenso, de manera que si vas bajando los div desaparecen y sigue y sigue...

He ajustado el CSS hasta el más mínimo píxel, pero el scroll sigue inmutable.

No se si puede ser cosa del display:block que viene por defecto en los div... he probado a cambiar por span los div, pero entonces todo el backend se descuadra y corregir todo sería demasiada faena (ojalá fueran solo simples div sin nada dentro... jeje)

Os adjunto los fragmentos de CSS que se ven implicados en esto, por si os sirve de algo

Código:

.main {
	top: 433px;
	left: 593px;
	width: 860px;
	height: 1185px;
	border: 0px;
	overflow: hidden;
	position: absolute;
}

.gral {
        top: -120px;
        left: 0px;
        width: 843px;
        height: 566px;
        position: relative;
        overflow-x: hidden;
        overflow-y: scroll;
}

.big1 {
	width: 115px;
	height: 893px;
	border: 1px solid #999999;
	position: relative;
	overflow: hidden;
}

.bigInside {
	top: 0px;
	left: 0px;
	width: 115px;
	height: 30px;
	border: 0px;
	text-align: center;
	vertical-align: bottom;
	background-color: #999999;
	position: relative;
}

el html está colocado de manera que es algo así

Código:

<div class=main>
        <div class=gral>
                 <div class=big1 style=top: 0px;left: 0px;>
                         <div class=bigInside>
                                 <!--TEXTO, IMG...-->
                         </div>
                         <!--HAY MÁS DIV DE CLASE BIGINSIDE-->
                 </div>
                 <div class=big1 style=top: -895px;left: 119px;>
                 </div>
                 <!--HAY MÁS DIV DE CLASE BIG1-->
        </div>
<div>

Espero que me podáis ayudar... llevo bastante rato intentando averiguar qué es, o al menos arreglarlo, pero no hay manera...

Gracias por adelantado!