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
Boris Kamp
16,660 PointsGive 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/
Boris Kamp
16,660 PointsHi 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
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
16,660 PointsHi 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
648 PointsAwesome!!!! Awesome!!!! Awesome!!!! So simple and work perfect!!!
Wayne Priestley
19,579 PointsHi 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
16,660 Pointsdo 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
19,579 PointsNo 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
19,579 PointsI'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.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHey 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
containerorcontainer-fluidbut 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.