Hi,
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).
CSS:
.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;
padding-left:11px;
}
#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;
}HTML:
<div class="body">
<div id="rightborder">
<div class="header"></div>
<div class="footer"><img src="../images/copyright.png"/></div>
</div>
</div>Do you know how to fix it? Thanks :)
-and sorry for my English if there were any mistakes
