Jump to content

CSS Problem, getting sidebar to meet footer


pb1uk

Recommended Posts

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

post-26517-127815580021_thumb.jpg

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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.

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...