I'm having trouble with this layout (attached image). I need to have images as borders, but I don't want to use multiple backgrounds in CSS3 (small browser support). I tried to make two floating divs, but then I deleted it because I can't set width: 100% - my main div needs width: auto. Then I tried two main divs - one that will have left top tiled background image, the other with right top tiled background image. This produced a bad thing - footer and right border moved about 60px up (attached image).

.body {
position: relative;
top: 0;
width: 1022px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
height: auto;
background: black url(../images/border.png) repeat-y left top;
#rightborder {
background: black url(../images/border.png) repeat-y right bottom;
height: 100%;
.header {
width: 1000px;
height: 118px;
background: #000000 url(../images/header.png) no-repeat center top;
position: relative;
left: 11px;
.footer {
width: 1011px;
height: 38px;
background: #000000 url(../images/mainfooterbckg.png) repeat-x left top;
position: relative;
bottom: 0;
left: 0;
overflow: auto;
.footer img { 
display: block; 
margin-left: auto; 
margin-right: auto; 


<div class="body">
<div id="rightborder">
<div class="header"></div>
<div class="footer"><img src="../images/copyright.png"/></div>

Do you know how to fix it? Thanks :)
-and sorry for my English if there were any mistakes

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.