Okay guys, I have a small problem. Actually, It will probably be a big problem if I can't get it sorted out soon.

Here is my problem: I have a main area floated to the right, with no height, and I have a sidebar floated to the left, with no height. Both of which are in a centered container, with no height. Since the sidebar has significantly less content that the main section, it does not expand to be larger like the main section - therefore causing them to be different heights. And that is my problem. I need both to the same height, no matter how much content is in the main area. I don't know of any code that will solve this for me, so I'm gonna need you guys help me come up with a solution.

Thanks!
- Steve

overflow: auto; on the container to make it stretch to it's content.
height: 100%; on the sidebar and also on the main content.
Just a suggestion, not sure it'll work. :P

<self promo>
http://www.candsdesign.co.uk/article...eight-columns/


added -
One of these days I will rewrite it NOT to need fixed name elements

Wow, thanks Chris. I knew I could do that with JavaScript, but... if there was a way with clever coding and css that would be much better.

Originally Posted by Insensus

overflow: auto; on the container to make it stretch to it's content.
height: 100%; on the sidebar and also on the main content.
Just a suggestion, not sure it'll work. :P

Thanks for the reply Insensus. The problem is, that the main container is already stretching to it's main content. And the 100% height won't work because then it stretches down to the page, no matter how much content there is.

- Steve

I always use the faux columns method, which is probably what Chris just pointed out (didn't read his article).

Great, thanks. I've used the 'faux columns' method before, but I sort of wanted to avoid images. But, oh well. A 1px high two-color .gif isn't that big, it it?

Thanks for the help guys!
- Steve

EDIT: Ahha! Of course. I set the background of the sidebar to be the same background of the container, and then put in overflow: auto; for the container to stretch to be as high as the content. That way, it appears that the sidebar is stretching as far as the content, while it's only the background of the container. Sweeet!

Originally Posted by stevej

EDIT: Ahha! Of course. I set the background of the sidebar to be the same background of the container, and then put in overflow: auto; for the container to stretch to be as high as the content. That way, it appears that the sidebar is stretching as far as the content, while it's only the background of the container. Sweeet!

But what do you do if the sidebar ends up being longer than the main content?

That will generate a problem. But fortunately, that's not happening with the website I am making.

- Steve