Stromgren Posted April 15, 2012 Share Posted April 15, 2012 Hello.. I'm working on a site where i need a pad to make my columns reach the footer on the page. Here's the site: byvejen.dk/lb2The leftcolumn cant reach the bottom, so i placed a pad behind it. The HTML looks like this: <body><div id="container"><div id="leftcolumnpad"></div> <div id="header" title="LejeBasen.dk"> ... </div> <div id="leftcolumn" class="w210"> ... </div> <div id="maincolumn" class="w750"> ... </div> <div id="footer"> ... </div></div></body></html> I styled the pad like this: position:absolute;float:left;background-image:url(../images/structure/padleftw210cfff.png);background-repeat:repeat-y;background-position:left top;width:210px;min-height:100%;background-color:#fff;z-index:-1;margin:0;padding:0; But still the pad wont be longer than the leftcolumn. I played around with this for some time in Firebug, but i cant seem to make i change. Any help i apprecieted Link to comment Share on other sites More sharing options...
dsonesuk Posted April 15, 2012 Share Posted April 15, 2012 #leftcolumnpad {position:absolute;/*float:left; useless with absolute */background-image:url(../images/structure/padleftw210cfff.png);background-repeat:repeat-y;background-position:left top;width:210px;/* min-height:100%; not required */background-color:#fff;z-index:0; /*should not be set lower than zero *//*margin:0; useless with absolute *//*padding:0; useless with absolute */top:0;bottom:0;left:0;} #container {position: relative; /*required so pad will match height of container, which in turn will match the height of highest child container within it.*/} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now