please look at this link
http://www.sudhakargolakaram.co.in/files/layout.html
i am using 3 columns left center right with a center layout of 1000px
in the left and right columns where the content starts at the top and at the bottom i have rounded corner background images the top rounded corner image is fine
i am using a background image of width of 1000px to the div that has the entire page content and this image repeats in y as the height of any columns increase
the problem i am having is with the bottom rounded corner as the height of either the left center or right increases this bottom rounded corner image should grow accordingly and this bottom image should always stay at the bottom so i have used
#contentouter{
float: left;
position: relative;
width: 980px;
background: url("../images/contentbg.jpg") 10px 0px repeat-y;
}
as contentouter is the containing div for bottom rounded corner image and for the bottom rounded corner
.bottombg{
position: absolute;
bottom: 0;
width: 228px;
height: 10px;
background: url("../images/bottombg.jpg") no-repeat top left;
}
this is working fine however for some reason only in certain pages this rounded corner image only in the left column is not appearing the way the rounded corner image in the right column appears
here is a screenshot = http://www.sudhakargolakaram.co.in/files/layout.jpg
i am using a cms for my website only for certain pages the left image appears this way for all other pages the left image appears like the right image
using the cms i have given a class name to the body tag of the pages that is having the issue and i am adjusting this left image as
.aboutpage .left .bottombg{
position: absolute;
bottom: -364px;
width: 228px;
height: 10px;
background: url("../images/bottombg_left.jpg") no-repeat top left;
}
but if the content in any column increases i have to change the value of bottom which i dont want
how do i make the left corner image to appear at the bottom like the right corner image on all pages |
