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
Stu Cowley
26,287 PointsTwo Column Layout Issues
Hey guys,
So I'm currently doing a web project for a friend and I have come across a really annoying issue that has me completely stumped on. Basically I have a header with a logo on the right hand side and the navigation on the left, this is working perfectly.
The issue lays within the two-column layout. I have a class of .content-column grid_8 and another class of .side-column grid_3 what is happening is that the two columns height do not match with each other. I'm using the gric.css that was used with the Smells Like Bakin' project.
Just so you know what I have, here is my code
/* style.css */
.content-column {
line-height: 2;
background-color: #fff;
border: 1px solid #d8d8d8;
border-right: none;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
padding: 1em;
margin: 5em 0;
}
.side-column {
background-color: #fafafa;
border: 1px solid #d8d8d8;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
margin: 5em 0;
padding: 1em;
width: 28.5%;
}
Probably a dumb question, but it doesn't hurt to ask. Would making an adjustment to both .grid_8 and .grid_3 within the grid.css be the solution?
Maybe Guil Hernandez could shed some light on this for me.
Thanking you all in advance!
Stu :)
6 Answers
Guil Hernandez
Treehouse TeacherTake a look at CSS Layout Techniques, particularly the display modes and floats stages. It should help answer your questions on column height. :)
Adam Moore
21,956 PointsThe columns will only go as big as their contents, unless you set a specific height for them that causes them to match. So, if your columns have no set height, and different amounts of content, they will always be different sizes, only adjusting to accommodate their contents.
You could also set a jQuery function to make one column's height always match the other one (like the one with less content having its height set to be whatever the height of the one with the most content is).
James Finn
7,055 Points.content-column, .side-column{height:100%;}
This declaration will force the selected elements to take up 100% of the height of their parent container.
Adam Moore
21,956 PointsUnless their parent element has been set to some height greater than the browser window height, if you set the columns' height: 100%, then they will only go as big as the browser window. The contents of the columns (assuming the contents take up a greater height than the browser window) will then stretch into white space below both the columns and parent element. I suppose this is because, unless a specific height has been set for the parent container, it only goes as big as the browser height, the equivalent of the parent having a set height: 100%. If the parent is set to display: flex, this seems to make the columns maintain equal height, regardless of which column has the greater amount of content. Therefore, it seems that using display: flex would be better for maintain equal height with changing content.
James Finn
7,055 Points@Adam Moore - Actually, "unless a specific height has been set for the parent" height:100% will have no effect, browser, or, more accurately, viewport height notwithstanding.
As a note here, for my current project, I elected to not use the flex module, because, although it is in candidate recommendation, browser support is unreliable, requiring polyfills: points off for accessibility (at least for now).
Adam Moore
21,956 PointsNot sure I get what you're saying. If you set the child height to 100%, but do not set a parent height, the child will take up 100% of the viewport height. I was just saying that, to make the column heights the same height, you can't simply set the children to be 100% and expect them to grow as the parent grows, as 100% would only refer to the viewport size, unless the parent is set to greater than 100%.
Stu Cowley
26,287 PointsThanks guys, and thanks Guil, I thought that there might have been a course that would demonstrate this, I'm actually doing the CSS Layout Techniques deep dive as we speak.
I'm a bit apprehensive about using jQuery plugins to achieve things like this.
Stu Cowley
26,287 PointsHey Guil Hernandez did the CSS Layout Techniques deep dive and I have now managed to fix this issue :D
Stu Cowley
26,287 PointsHey Guil Hernandez did the CSS Layout Techniques deep dive and I have now managed to fix this issue :D