div wont resize to fill its container

Hi Glenn,

Not sure if you've resolved this yet but there's a few equal column heights techniques that you can use for this.

Here's a summary of some techniques on css tricks:
http://css-tricks.com/fluid-width-equal-height-columns/

The one that I personally like to use is the second to last technique under the heading "One True Layout Method".

You have to use a wrapper around your two columns so that you can set overflow: hidden on it. You then give each column a large bottom padding and then an equally large negative bottom margin to bring the document flow back up to where the content is.

So what happens is that as your content grows in height and pushes the footer down you are simply exposing more and more of the excess bottom padding in the sidebar. Or vice versa if your sidebar happens to be longer than the content.

The basic html:

<div id="container">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

The basic css:

#container {
    overflow: hidden;
}

#sidebar,
#content {
    padding-bottom: 9999px;
    margin-bottom: -9979px;    

In this example, I didn't bring the margin all the way back up to the content but instead I stopped short by 20px. This has the effect of giving you 20px of padding between your column content and your footer.

In the mobile section, take away the 500px height for both the .content and .sidebar classes. Then in the media query for larger screens, don't set a height for the .content class. The 500px keeps the divs that size regardless of text, and the height setting for the .content class is setting it to the size of the browser window height, so if you make your desktop browser wide, but narrow from top to bottom, you'll notice that the .content div gets even smaller, holding even less text. When I did this, it fixed the problems that I think you described. I'm not 100% sure on my explanations as to why they are doing that with the height setting at 100%, but I'm pretty sure I heard something like that in one of the tutorials on here. However, I had some difficulty tinkering around with it myself just now trying to figure out why it didn't work. Hope this helps!

thanks for your effor chris i tried what you suggested now the content div extends to the size of its contents the only problem now is the sidebar does not extend its height to the bottom of its container basically i want the sidebar to always extend down to the footer an example would be if you add/remove values from the content section the content section should shrink/grow and the sidebar should shrink/grow with it. The sidebar is set to float left with a width of 200px. If i set the height to 100% it only extends partially down to the footer. If I remove the height attribute it collapses down to the sidebar text as expected. Any ideas? See the working code here. https://gist.github.com/anonymous/11417913

chris here another simplified example of the same problem. Load the following code up and shrink the width of you browser until the main divs content forces the footer down the page. Notice how the sidebar does not extend its height to the footer. Its stops. https://gist.github.com/anonymous/11418037

I think you are just going to have to set your background color to whatever your sidebar color is, and use the background color to fill the way down, or set your container to the same background color (probably a better bet) and not specify a height for the container.

It seems to me that you either have to do those things, or simply specify an exact pixel count for the height of the sidebar that comes down to your footer.

really, the sidebar can't be configured to extend to the footer, theres no solution to this problem?

If you use jQuery, you can set the sidebar's height to match whatever is set for the content's height, following it when it changes.

// $(".sidebar").height($(".content").height());