Jump to content

Problems with column lengths


Recommended Posts

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 post
Share on other sites
#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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...