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

Posted by Seth Barthen
Seth Barthen
11,266 Points

How to get column heights the same?!

I saw this in one of Guil's videos a while ago.. I know it's some simple padding or margin for CSS but now I can't find it >:0

Basically I have two columns .main-content and .secondary-content

The second column is half the height of the main one. What do I put into CSS to make it flush height wise??

4 Answers

Robert Stewart
Robert Stewart
11,921 Points

I think I know which video you're talking about, in which the solution was: (Modified for your use)

html, body, .main-content, .secondary-content {
    height: 100%;
}

This will set the heights of both columns to be the same, unfortunately it does have the side effect of making the content areas rather tall which is something you may not want.

The other way would be to use Jquery to get the height of your .main-content and set the .secondary-content area to the same height. Like this:

$(document).ready(function() {
    var Height = $('.main-content').height();

    $('.secondary-content').height(Height);
});

Depending on your needs, the second option may work better. Unless, of course, someone else can think of a better solution.

Seth Barthen
Seth Barthen
11,266 Points

Actually the height: 100% doesn't seem to be working. :( I wish I knew what video it was so I could see what he was doing! Maybe I'm totally off in what he was trying to accomplish and that's why it's not working for me

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Thanks for the quick response! Unfortunately, I'm still just trying to become proficient in CSS and haven't got to JS yet, but I'm sure I'll get it soon enough :)

Jaka Dirnbek
Jaka Dirnbek
7,046 Points
Jaka Dirnbek
Jaka Dirnbek
7,046 Points

This is a classic problem :) It can be fixed with the flex family of properties in CSS, but this is not supported by older browsers.

Old school solution is this: http://jsfiddle.net/BC98R/

Idea: You give an element a very large bottom padding so it stretches the background color. You give an equal negative margin to "shorten" the element. You give a overflow:hidden property to the parent element of the columns so all the extra background color is not visible.

No JS, pure CSS :)

Is this what you were looking for?

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Jaka, that does seem to be another way to fix it! I was looking for the answer Robert gave me though because I don't want my height to be super long.

I think that both ways will end up working. I feel like I still have barely touched this stuff when I go at it alone. Either way thanks for the answer!