Poner imágenes como borde de una caja de comentario

[yogiri]

Asi funca en los 2:

HTML:

Código:

<div id="contenedor">

    <div id="post">
        <div id="encabezado">
        </div>
        <div id="cuerpo">
            Contenido
        </div>
        <div id="pie">
        </div>
    </div>

    <div id="post">
        <div id="encabezado">
        </div>
        <div id="cuerpo">
            Contenido mas grande
            <ul>
                <li>Tema uno</li>
                <li>Tema dos</li>
                <li>Tema tres</li>
                <li>Tema cuatro</li>
            </ul>
        </div>
        <div id="pie">
        </div>
    </div>

</div>

CSS:

Código:

#contenedor{
position:relative;
text-align:center;
margin-top:100px;
margin-left:0px;
}


#post{
position:relative;
width:470px;
height:auto;
margin-bottom:150px;
margin-left:auto;
margin-right:auto;
}


#encabezado{
position:absolute;
top:-50px;
left:0px;
background-image: url(imag/comentop.png);
background-repeat:no-repeat;
width:470px;
height:50px;
}
#cuerpo{
position:relative;
text-align:left;
background-image: url(imag/comenbody.gif);
background-repeat:repeat-y;
width:470px;
height:auto;
}
#pie{
position:absolute;
left:0px;
background-image: url(imag/comenbot.png);
background-repeat:no-repeat;
width:470px;
height:80px;
}

Estan centrados a modo de ejemplo, acordate que para que funcionen la posicion del elemento que los contiene a todos (en mi caso hice un div "contenedor") debe tener la posicion seteada, ya sea relativa o absoluta, ya que si no esta seteada se comportara de diferente manera en los diferentes exploradores.

Espero te sirva, saludos!