Div's anidados y min-height

[dabit_1]

Buenas!
Miren, tengo un problema y después de horas y horas intenando buscar solución he optado por pedir ayuda... les explico
tengo esto:
<div id="alrededor1">
<div id ="alrededor2">
<div id="contenedor">
<!-- CONTENIDO -->
</div>
</div>
</div>

CSS:
html, body{
height:100%;
}
#alrededor1 {
margin: auto;

width: 854px;
min-height: 100%;
background: white url("../img/borde_contenedor_i.png") repeat-y left;
}
#alrededor2 {
min-height: 100%;

width: 827px;
margin-left: 27px;

background: white url("../img/borde_contenedor_d.png") repeat-y right;

}
#contenedor {

width: 800px;
margin-right: 27px;

}

Que consigo con esto? Pues tener unos borde derecho y izquierdo con difuminado. El problema? En firefox parece que la propiedad min-height toma como referencia su contenedor a la hora de usar porcentajes, como el porcentaje no está definido toma como referencia el tamaño de #contenedor ya que es el que empuja hacia abajo todas las capas. #alrededor1 me toma el min-height correctamente ya que su contendor(body) es tan alto como la pantalla. Pero #alredodor2 es tan alto como #contenedor por lo anteriormente dicho. Tampoco puedo ponerle a #alrededor1 el height a 100% porque entonces ya no hace caso del min-height y si el contenido excede del tamaño de la pantalla el borde difuminado no llegará hasta abajo.

Ayuda porfavor!! desesperacion!!!

[jepsersk8]

La verdad hiciste un loco moroco..! mira, si deseas hacerlo (como lo entiendo), es tanto que te mates haciendo eso (a mi ya me paso...). Es la forma como haces los cortes en el programa q estes utizando... En de cortar dos slides, uno para la derecha y uno para la izquierda....
Puedes cortar la imagen degradada completa, igual no seria muchos kilobytes de mas, imagina de 827px de largo y 2px de alto y luego pones:

*{
padding:0;
margin:0;
}
#conteneder{
margin:0 auto 0 auto;
width:827px;
position:absolute; /*esto es para que te agarre desde arriba*/
top:0;
height:100%;
background:url(../path_a_la_imagen.jpg) repeat-y;
}

o la otra mas facil aun...

body{
background:url(../path_para_la_imagen.jpg) repeat-y center; /*como tu div principal, donde tienes los degradados lo tienes en el centro... esto hace lo que kerias!!! ya*/

Pero como??? El explorador calcula el largo total de la imagen de fondo y al darle center, calcula el centro de la imagen y el centro de la ventana y los une por ese punto... Jojo propiedad que casi nadie sabe... :) Y si te das cuenta no tienes q escribir nada mas... pruebalo...
}