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 Boris Kamp
Boris Kamp
16,660 Points

Give two divs the same height

I have two div's in one wrapper div, see the following situation I would like portfolio-post-l to be the same height as portfolio-post-r and the other way around if necessary. How can I accomplish this? it is needed because the portfolio-post-l has an border and should stretch to the bottom of the wrapper div row row-mobile fp-white-row. I know a solution is to give the portfolio-post-r a left border, but what if the right border becomes the shortest div? I need to ensure it works both ways no matter who's the taller div.

I just found out that col classes are messing up the table display fix. If I remove that class, it works, however, I would like to keep it because it's a Bootstrap class used for laying out the page.... Here's a Fiddle of my layout I think it has to do with positioning, anybody any suggestions? http://jsfiddle.net/boriskamp1991/w3xpn19k/2/

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Boris,

I've been trough Bootstrap from top to bottom and can't figure out exactly what part breaks your code, i have a feeling it's the container or container-fluid but thats something your going to need.

Did you customise your download so you only got the elements you need?
If not that might be an idea to try.

Sorry I couldn't be of more help.

Boris Kamp
Boris Kamp
16,660 Points

Hi Wayne,

Thank you for your effort! At the end, I found this code to work for me: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Thanks again for trying to help me out!

2 Answers

James Barnett
James Barnett
39,199 Points 
.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

source: http://stackoverflow.com/a/19695851/1756132

Check it out: http://jsfiddle.net/w3xpn19k/8/

FYI: This was result #2 on Google for bootstrap equal height columns

Boris Kamp
Boris Kamp
16,660 Points

Hi James,

So stupid of me not to do a bootstrap related search.... sorry for that.

I found your link very helpful but it breaks the responsiveness of the columns. ( see the fiddle you gave me) At the end I found this solution to work for me! Thanks! http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Thanks for pushing me in the right direction!

margarita Ilchenko
margarita Ilchenko
648 Points

Awesome!!!! Awesome!!!! Awesome!!!! So simple and work perfect!!!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Boris,

I just pasted your code into CodePen and the two columns stayed the same height even when i re-sized the browser.

Boris Kamp
Boris Kamp
16,660 Points

do you have the Bootstrap CSS included? that breaks it, but I need it, so I need some workaround. here's the url to Bootstrap's CSS. //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

In my Fiddle, I included it and you can see it does not result in two equal height div's

Thanks for looking into it Wayne!

Wayne Priestley
Wayne Priestley
19,579 Points

No I didn't actually, do you have some idea which part of bootstrap breaks your code?
You can narrow it down by commenting out parts of Bootstrap. Then when you find it you can add code to your css to override that part of Bootstrap code.

Wayne Priestley
Wayne Priestley
19,579 Points

I've just added Bootstrap to code pen and I see what you mean, it broke it straight away.
I'm going to play around with it for a while, I'll let you know what happens.