Делаю шаблон который должен выглядеть вот так

"Top" и "End" это картинки. Надо чтобы нижняя картинка была всегда внизу сайта, в зависимости от количества наполнения. И чтобы текст (т.е. content) был поверх этих двух картинок.
вот куски кода.
index.php
[spoiler title=index.php]
<body>
<div id="wrap">
<div id="sidebar">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<div id="content">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" />
</div>
<div id="sidebar-2">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="topdiv"> </div>
<div id="enddiv"> </div>
</body>
[/spoiler]
template.css
[spoiler title=template.css]
#topdiv {
background-image:url(../images/top.png);
background-repeat: no-repeat;
width:100%;
height:360px;
background-position: center;
top:0px;
position:absolute;
}
#enddiv {
background-image:url(../images/end.png);
background-repeat: no-repeat;
width:100%;
height:440px;
background-position: center;
bottom:0px;
position:absolute;
}
body {
text-align:center;
background-color: #FFF;
}
#wrap {
width:auto !important;
text-align:left;
}
#content {
float:left;
width:50%;
}
#sidebar,#sidebar-2 {
float:left;
width:25%;
}
[/spoiler]
Что надо исправить ?