Stromgren 1 Posted April 15, 2012 Report 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 Quote Link to post Share on other sites
dsonesuk 914 Posted April 15, 2012 Report 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.*/} Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.