请教一个关于Css+div页面排版的问题

就是一张网页分上中下三块，上面的是背景永远在网页的最上面如是522px，中间的要浮动在页面上(从页面的最上面到页面的最下面都是)长度不一定，如从600px-1200px之类的，然后下面的那块背景要永远在最下面，如是168px.

这样的话最下面要怎样来弄的。

我现在css是这样写的

#pagetop{background:url(../images/page-div-top-bg.jpg) repeat-x; position:relative; width:100%; height:522px;z-index:1; top:0px; left:0px}/*上面的背景*/
#pagecenter{z-index:5;position:absolute;top:0px; width:100% ;height:auto}/*中间内容*/
#pagebottom{background:url(../images/page-div-bottom-bg.jpg) repeat-x; position:relative; width:100%; height:168px;z-index:-1; bottom:0px}/*下面背景*/


内容：
<div id="pagetop"></div>
<div id="pagecenter">
这里放内容
</div>
<div id="pagebottom"></div>



但是这样不是我要的效果，这样的话，下面的背景是跟在上面的背景之下的，我自己也试过很多种方法都弄不起来，谁知道的可否指教下。（不知道我有没有表达清楚了）

[ 本帖最后由 lamen 于 2011-5-4 17:18 编辑 ]

知道你的意思
你外面再加一层 不就可以了 最下面的用margin-top