pb1uk Posted July 3, 2010 Report Share Posted July 3, 2010 Hi Everyone, I'm wondering if anyone can help me solve a css problem i have been having, i'm sure it's simple but css isn't my strong point and i've been trying for ages but can't get around it. I'm using a template: from webshapes that can be seen here The problem i've been having, if you look at the list of categories on the lefthand side, there is a small gap between that and the footer. I have tried creating a new div within the categories div and giving it the following properties: #block { float: left; width:195px; margin-top: 1px; background-color: #000; background-repeat: repeat-y; } The top and left line up fine but as i can added more content to the two divs in the middle of the page the new block i've added won't go down to the footer. I have attached a picture of how it looks at the moment. Content on pages across the site i'm doing could go a little over the length of the sidebar or a long way so i need the div to basically cover that blank space no matter what. I hope that makes sense. Any help would be greatly appreciated. Thanks, Peter Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 3, 2010 Report Share Posted July 3, 2010 A division will only be as large as its content - unless you give it a width and a height. Setting the height, however, is not very practical, as different pages likely have different content. You'd also be risking overflow issues. An easy fix for this issue would be to change the background of whatever division your side-division sits in to black, also - and if you need the white for your design, just add a white border. Or you can look at this: http://www.killersites.com/blog/2006/matching-div-heigths/ If those options don't work for you: Do you have the page up somewhere so we could see the entire thing? Quote Link to comment Share on other sites More sharing options...
pb1uk Posted July 3, 2010 Author Report Share Posted July 3, 2010 Hi thanks, for the quick response. I haven't got the site online yet, however the template is available from the link on my previous post. I'm using exactly the same in terms of layout just have changed the colour a little. I have used margins and borders elsewhere so can't really turn the background to black. The only difference i have made is to add a div called block in this section of the code <li><a href="http://www.freewebsitetemplates.com">Jeans</a></li> </ul> [b]<div id="block"><p> </p> </div>[/b] </div> <div id="seasonal"> and styled it as in my previous slide. It's really annoying me as i'm sure there's a simple solution! Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 3, 2010 Report Share Posted July 3, 2010 There is not really a simple solution, other than working with the background color. Even the template you point to has this gap. Here is another way to deal with the issue: http://www.visibilityinherit.com/code/eqaul-height-columns-withcss.php Btw - <b> does not go around a division tag. If you want to bold what's in the division, use your CSS. Quote Link to comment Share on other sites More sharing options...
pb1uk Posted July 3, 2010 Author Report Share Posted July 3, 2010 Hi, Sorry the <b> tags were meant to show what i had added, obviously got that wrong! I've changing the background colour to black but the categories div still doesn't go down to the footer. The css for it is: #categories { float: left; width: 195px; margin-left: 3px; margin-bottom: 0px; height:100%; background-color:#000; } so far Do you have any idea why i'm going wrong with that method? Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 3, 2010 Report Share Posted July 3, 2010 You're not doing anything wrong - as I said, unless you specify a height (which is not a very good way to fix this issue) a division will only be as big as it's content. I was saying that if you color the background of whatever division the too-short division sits in in the same color, then the gap will still be there, but cannot be seen. Quote Link to comment Share on other sites More sharing options...
pb1uk Posted July 3, 2010 Author Report Share Posted July 3, 2010 I have changed the css for the categories div (sidebar) to #categories { float: left; width: 195px; margin-left: 3px; margin-bottom: 3px; height:100%; background-color:#000; position:absolute; } Now the sidebar overlaps the footer! Is there a way to make it stop at the footer? Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 3, 2010 Report Share Posted July 3, 2010 clear the footer Quote Link to comment Share on other sites More sharing options...
pb1uk Posted July 3, 2010 Author Report Share Posted July 3, 2010 Hi Andrea, Sorry to keep going, I have put that in and it doesn't seem to want to work :-( My code for the sidebar (categories) and footer (copyright) is: #categories { float: left; width: 195px; margin-left: 3px; margin-bottom: 3px; height:100%; background-color:#000; position:absolute; } #copyright { clear:both; text-align: center; font-size: 9px; padding: 3px; background:#000; border-top:1px; border-bottom:#FFF 3px; border-right:#FFF 3px; border-left:#FFF 3px; border-style: solid; } Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 3, 2010 Report Share Posted July 3, 2010 It's really hard to help without seeing everything you have. At a minimum, I need ALL the html and CSS - but ideally, any images as well. So if you could upload the page somewhere, it'd be best. Quote Link to comment Share on other sites More sharing options...
pb1uk Posted July 6, 2010 Author Report Share Posted July 6, 2010 Thanks for all your help Andrea. Solved the problem by reversing the colours so the background was black and borders and backgrounds of divs were white to get the edges correct. Quote Link to comment Share on other sites More sharing options...
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.
Note: Your post will require moderator approval before it will be visible.