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
Konrad Pilch
2,435 PointsHow to make the same height in CSS
how could i make two collumns the same height depending on how much text its inside?
So in coulm 1 you have e.g 100 paragraphs, so the coulmn two will be filled with 100 paragraphs but with none just white so whatever the number of height of column 1 is, the coulm two will have the same height
8 Answers
Luca Argenziano
16,416 PointsI see what you mean. What they did there is nesting a row inside another row: the "content in the middle" and "connect with us" are both inside a col-md-9 that contains inside a row with two columns in it. If you don't want your first column to be related with your second and third one, you need to rethink your html like this:
<div class="container">
<div class="row">
<div class="col-md-3"> <!--This is your sidebar navigation--></div>
<div class="col-md-9">
<div class="row second">
<div class="col-md-8"><!--This is your content in the middle--></div>
<div class="col-md-4"><!--This is the "connect with us"--></div>
</div>
</div>
</div>
</div>
Then you apply this css only at the second row:
.second{
overflow: hidden;
}
.col-md-8,
.col-md-4 {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-md-8 {
background: yellow;
}
.col-md-4 {
background: red;
}
But this is not about making three columns the same height ;-)
Konrad Pilch
2,435 PointsOkay, it works in the codepen :DD
Thank you very very much! I should make it on my own now , hopefully , can make things working now. Thank you ! I cant imagine how long would i spend to figure this out on my own. Deffinitely learned something new today.
Now ill try to get it working :D
Thank you!
Konrad Pilch
2,435 PointsWOW amazing. I just need to do few adjustments to make it properly work, but it works!
Thank you really . Amazing.
But , one question, how does this work?
What i understnad is this:
The colors are going all the way down or top as well, and with overflow hidden u are hiding them so they stay in the column , and with the margin and padding, u just are confusing browser? xd or giving padding 9999 and pushing it up with margin ? or vice versa?
And thank you for staying that long with me on this.
Luca Argenziano
16,416 PointsHi Conrad! I suppose your columns are fluid; if not, the simple answer is "set a min-height for the two". But if you want them to be responsive, I found this good tutorial for you: http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403 If you're using a Framework (like Bootstrap) it all becomes a lot easier, because you only need to wrap your columns inside the same row (and it's essentially what this tutorial is about: how to make a row with columns inside it).
Hope it will help!
Let me know if you achieve the desired result ;)
Konrad Pilch
2,435 PointsThank you!
I was reading i believe pro code from bootstrap templates, and i see i made few mistakes with how i nested stuff, i tried everything , didnt work.
And you need to delete
That because it corrupts the link. Lol good i spoted it. Somehow treehouse always puts it like that now.. wonder if was like that or its a bug.
Thank you! I have a look about it tomorrow! Today im exausted and my mind isnt working .
Konrad Pilch
2,435 PointsNo it doesnt work i dont know , its confusing : p its not working on codepen nor in my browser , could you should me how would you do it please?
Luca Argenziano
16,416 PointsHi Conrad! I did it for you, but I have to explain a few things to let you understand what I did. As you can see in the code below, there are two containers, one on top of the other. I first moved container1 left by 50%, so I can see both containers now, and they are shown with equal width and height. Finally, I moved the two columns inside the container1 to the right with left: 50%; so now they're both visible. Lastly, I set the overflow to hidden, because we now have a total width of 150% and we want it to be 100%. Padding in <p> is only for moving the text away from the borders of the browser window a little bit and it's not essential.
<html>
<head> <title>Equal height columns</title> </head>
<body style="margin: 0; padding: 0;">
<div id="container2"
style="float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;">
<div id="container1"
style="float:left;
width:100%;
background:red;
position:relative;
right:50%;">
<div id="col-1"
style="float:left;
width:50%;
position:relative;
left:50%;
overflow:hidden;">
<p style="padding: 10px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum, felis ac accumsan congue, mi odio pretium urna, ut ornare purus nibh a metus. Integer ut magna suscipit, porttitor metus eu, auctor ex. Vivamus dictum a turpis a fermentum. Donec ut ligula tincidunt lectus placerat euismod. Vivamus ipsum sapien, consectetur ut ante sit amet, malesuada pharetra augue. Fusce ipsum lorem, lacinia eget maximus eu, sagittis ac lacus. Integer vel leo facilisis, lacinia erat non, semper elit. Integer eu imperdiet felis. Phasellus euismod eleifend libero, et porttitor neque lacinia at. Curabitur hendrerit ipsum ultricies mollis scelerisque. Maecenas tempus augue arcu, eget aliquam urna malesuada a.</p>
</div>
<div id="col-2"
style="float:left;
width:50%;
position:relative;
left:50%;
overflow:hidden;"></div>
</div>
</div>
</body>
</html>
Probably this is not the best method, but it works just fine. If you want to play with it, feel free to make it yours ;) And if you have problems at understanding how it works, let me know and I'll try to explain you better what's happening in this code.
Finally a little advice for you: if you don't feel comfortable with CSS, I highly recommend you to take Guil's course here at Treehouse; I learned an incredible amount of things from him and, while I'm now close to 10000 points, I still consider him one of the best Treehouse teacher at all.
Konrad Pilch
2,435 PointsHehe, my opinions about teachers are different, but i really love Zac videos and Nick .
I feel comfortable with CSS, its just there are some things, i might not work, such as CSS with JavaScript? i believe you do it a little bit different. I never did it . What more likely is now, i never did it, i did practice a lot of other layout methods etc.. with css tricks but this one here, to have three collumns, and two of them have eaqual height, relaying on the middle where the text goes more and the column background expands , the neighbour, is totally new to me.
I will look at this code now, since im jsut doing it. Thank you! Hope i can manage to understnad it. I did also iprove the code here so id implement that there on my desktop . Im really learning from the gbest practices and articles now, so im getting better at it every day , as long as i learn and analize. i think this is much better than what i had before. The code,
Luca Argenziano
16,416 PointsHere's another, simpler solution:
<html>
<head> <title>Equal height columns with tables</title> </head>
<body style="margin: 0; padding: 0;">
<div id="container">
<div id="col-1">
<p style="padding: 10px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum, felis ac accumsan congue, mi odio pretium urna, ut ornare purus nibh a metus. Integer ut magna suscipit, porttitor metus eu, auctor ex. Vivamus dictum a turpis a fermentum. Donec ut ligula tincidunt lectus placerat euismod. Vivamus ipsum sapien, consectetur ut ante sit amet, malesuada pharetra augue. Fusce ipsum lorem, lacinia eget maximus eu, sagittis ac lacus. Integer vel leo facilisis, lacinia erat non, semper elit. Integer eu imperdiet felis. Phasellus euismod eleifend libero, et porttitor neque lacinia at. Curabitur hendrerit ipsum ultricies mollis scelerisque. Maecenas tempus augue arcu, eget aliquam urna malesuada a.</p>
</div>
<div id="col-2"></div>
</div>
</body>
</html>
#container {
display: table;
width: 100%;
}
#col-1 {
float: none;
width: 50%;
display: table-cell;
vertical-align: top;
background: red;
}
#col-2 {
float:none;
width:50%;
display: table-cell;
vertical-align: top;
background: green;
}
Konrad Pilch
2,435 PointsIt doesnt kidna work.
And it covers all background not just the column. I dont know if im lazy not to think about this or what, but could you tell me key code i would need to include for it to work?
Luca Argenziano
16,416 PointsI can't see your code because your link is 404, but with a simple copy-paste in codepen you should see this: codepen If you need a third column all you need to do is copy-paste the class attribute of col-1 or col-2 and change the width of the three elements from 50% to 33,33333%. ;-) repost your link if you want and I'll try to fork your code
Konrad Pilch
2,435 PointsYou need to delete the
In every link.
But its this code pen here .
I know, but now i was trying to put that in my project but dindt really work well.
Luca Argenziano
16,416 PointsI didn't know you were using Bootstrap, sorry. Bootstrap rows and columns causes some issues when you try to make them tables. So... Copy and past this css and you'll be fine:
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-md-3 {
background: yellow;
}
.col-md-6 {
background: red;
}
Konrad Pilch
2,435 PointsThis is the effect I get xD Seem a real pain to do that. isnt there a way to do with the support of jQuery?
Luca Argenziano
16,416 PointsIt looks like it worked. Simply remove the white-bg class from your columns, service-sidebar class from the last column and this css rules:
.service-main-content{
float:none;
display: table-cell;
vertical-align: top;
background: green;
}
and you're done.
Konrad Pilch
2,435 PointsI think i know what you mean, but thats not exactly what i ment, what i saw is that if you look here and if u go to different services, you see how the connect with us and content in middle is related? when theres more text the conntect us expands, im trying to copy it and learn .
Thats like probably the one think i cant do with CSS : p i can do anything i like really, apart form this , i never really though to do it .
Luca Argenziano
16,416 PointsIt's all about understanding the difference between margin and padding. If you have a div, margin affects how it interacts with object outside itself, while padding determines it's size. The problem with columns that are not equal in height is that they're too small, so you need to grow their height in some way. If you delete the "overflow: hidden" you will see how it works. So exactly what's happening? It depends on which device you're watching this.
On desktop: columns are really high, 99999px + their original height, but you don't see it because all that height is hidden by the row that contains them (making them looks all the same height)
On mobile: well, on mobile they're one next to the other vertically, and all three inside the same row. So we need to set their height back to normal. Here is where negative margin came in. Again, try to delete "margin-bottom: -99999px" and you will see what's happening.
Using both negative margin and positive padding is a really common practice in css, and you will discover it by yourself diving deeper in this language. I leave you with a question: if you have a fixed navbar that's 50px high with a link that, when clicked, scroll you to a div somewhere in the page, and you want that div to start just where the navbar ends (so at 50px from the top instead of 0px), because otherwise your title go behind the fixed navbar, how would you do? ;-)
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsThis is the code but eh.