Sidebar extend dilemma

[rendezvouscp]

Hello all. I'm trying to get the right border on my sidebar to extend all the way down the page. I know it's refusing to go completely down to the footer because the content of the sidebar doesn't fill up the sidebar. I would just use faux columns (http://www.alistapart.com/articles/fauxcolumns/) to get the drop shadow I wanted in another post and get my border to extend down to the footer, but I've decided that I want an elastic site that'll expand with the text. So my problem is that most hacks will work for restricted width sites that don't expand, but I want my site to be able to expand and have the border extend all the way down. Any suggestions? Thanks in advance.

Here's the site in question: http://www.brownievouscp.000k2.com/server/
Here's the core CSS: http://www.brownievouscp.000k2.com/server/elements/core.css
Here's the CSS used for the blue layout (the one with the borders): http://www.brownievouscp.000k2.com/server/elements/blue.css
-Chase

 

[Makosuke]

This is the classic problem, and one there's no perfect workaround for--floating objects just aren't designed to "know" the height of their containing object in CSS. Personally, I generally prefer to just have shorter sidebars--there's no rule they have to extend the full page length.

That said, there are several ways to work around it, but I prefer this one (providing the content is always longer than the sidebar):

Think backwards; make it your main body content that needs to extend all the way to the bottom, and have the actual sidebar div just be transparent.

For example, on your site, have a "main" container DIV with a darker blue border and a background color of whatever you want the sidebar's background to be. Then, put a completely transparent sidebar DIV inside it floated right with a fixed width, and a "body" DIV for the body text with the desired background color, a right margin big enough to avoid the sidebar, no left margin (so it bumps up against the left border), and you're done. You can even give it a right border if you want it to look like there's a frame between it and the sidebar.

The flaw in this system is that if the sidebar is longer than the body text, then the body's background color will stop short. You should be able to set a "min height" for the body DIV, but I've found support for that to be spotty.

 

[rendezvouscp]

Wow, thanks! I really need to start thinking outside the box... And it really doesn't matter to me that if the content is less than the sidebar then I won't have a completely white content background because I can always just add non-breaking spaces to the content if I have to. Thank you so much!
-Chase

 

[WoD]

Forget non-breaking spaces.. whilst thinking outside the box in which the box you are thinking outside of is contained (I had the same problem, found the solution here, and decided it was just not viable) I came up with the simplest solution - why not just drop a background image the width of your sidebar into the containing div.

That is a solution I have used to extend a floating sidebar to the bottom of a page and it works beautifully and my sidebar even has a percentage width - which is where it gets a little tricky and took a little figuring out.

Your little hack background image must be about 2000 to 4000 pixels wide, or less if you have a narrow layout. You then take the percentage width of your sidebar and draw it onto your background image (which will ultimately be 1px high, or higher if you want some sort of pattern) in the correct percentage.

Eg: A 2000px wide background for a 20% sidebar would use a strip of colour 400px wide which is then tiled to create your sidebar.

You then simply place the background into your containing div and set it left 20% and repeat-y.

On further reflection a strip of transparency would be better allowing you to change the colour of your sidebar (by changing the background colour of the containing element) without having to change the colour of the image. This would also allow you to texture your sidebar simply by adding another containing div and setting the sidebar texture as the background. The non-transparent section of the sidebar extender would always be a solid colour, though, so changing the background colour of your main content would require the image change anyway.