Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

glenn romaniuk
glenn romaniuk
32,520 Points

div wont resize to fill its container

I have markup with a header, sidebar, content, and footer sections. The content div doesn't seem to expand to display its contents properly. If I add more values than it can display if overflows the footer. The content section is colored light blue. The behaviour i'm looking for is the sidebar and content section height should automatically fill its container and the content sections height should size to contain and display its content. See https://gist.github.com/anonymous/11412037 for sample project.

8 Answers

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.

Good idea, exactly what I was looking for

Adam Moore
Adam Moore
21,956 Points

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!

glenn romaniuk
glenn romaniuk
32,520 Points

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

glenn romaniuk
glenn romaniuk
32,520 Points

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

Adam Moore
Adam Moore
21,956 Points

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.

Adam Moore
Adam Moore
21,956 Points

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.

glenn romaniuk
glenn romaniuk
32,520 Points

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

Adam Moore
Adam Moore
21,956 Points

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());