Y... En tiempo récord de 20 minutos, encontré la solución a tu problema.
Cambia el HTML de esta forma:
Código HTML:
<DIV class="left">
<DIV class="right">
<DIV class="middle">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat quam at magna dignissim dignissim. Maecenas porta ligula non nisl iaculis commodo. Curabitur lacinia urna sed magna tincidunt sit amet dignissim elit lobortis. Phasellus vitae massa libero, sed sagittis justo. Praesent eu dolor ipsum. Praesent risus dui, auctor nec tempor nec, adipiscing mollis erat. Cras a ultrices mi. Vestibulum bibendum venenatis convallis. Suspendisse lobortis consectetur velit ac egestas. Ut enim lacus, elementum id scelerisque id, venenatis nec odio. Aliquam pulvinar tempus consequat. Maecenas vulputate enim sit amet justo rhoncus vitae consectetur diam tincidunt. Sed ultricies quam molestie justo accumsan blandit. Mauris quis orci at libero euismod porta non quis leo. Duis eu purus vitae nisl porttitor iaculis quis in nunc. Mauris dui dui, porta quis dictum non, tempus vitae libero.</P>
</DIV></DIV></DIV>
Y el CSS correspondiente así:
Código:
.left {background:url(images/izq.png) repeat-y top left;}
.right {background:url(images/derecha.png) repeat-y top right;}
.middle {width:896px;
background:#fff;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px
}
Espero te sirva. Solo una pregunta... Si posteriormente no va a ser estático... ¿Cómo arreglarás lo que son imágenes superior e inferior?