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 CSS Layout Techniques Display Modes Column Layout with Inline-Block

Anthony Beard
Anthony Beard
11,914 Points
Posted by Anthony Beard
Anthony Beard
11,914 Points

How can I set equal column heights that also resize when more content is placed inside the columns?

Using the methods in the video, I have columns laid out using inline-block. I have a header, footer, and column wrapper. As in the video, I set html, body, and wrapper to height 100%. I set my columns to height 80% so they would be equal height and leave some extra room on the bottom.

The problem with this is when the column contents are taller than the height of the viewport, the contents spill over onto the footer and past the bottom of the html's height (the height of the viewport), causing the footer to be covered and extra white space being created below the rest of the page

With a fixed height, the columns don't expand to the content size, but without it, the columns don't have an equal height.

Is there a way to have both equal height columns and height that automatically fits the content?

chrisp
chrisp
13,686 Points

Hmmm, so I think when you set height: 80% this implies that it will have the max height 80% of the parent height.

One solution is set both parent height and child height to 'Auto'; 

 div { height: auto; }

This will gradually expand as content fills in.

Another possibility is to use overflow with set height, this will make it scrollable as contents grows.

div { height: 80%; overflow: scroll; }

Hope this helps. Good luck.

4 Answers

lihaoquan
lihaoquan
12,045 Points
lihaoquan
lihaoquan
12,045 Points

One way is to set a height for the contents in the container to be the same in each column, and remove the fixed height for the container ( Which you have set to be 80% ) . With the fixed height of the contents, it will cause the container to expand and have the same height ( That is, if the contents in the columns are set to have the same height ).

Second way is to set the column to have the CSS attribute of "overflow: auto", which will create a scrollbar for the container when the contents inside the container is bigger than the container. You'll have to scroll the container in order to view the overflowed contents.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Anthony,

Maybe this will help: Getting the height

Anthony Beard
Anthony Beard
11,914 Points
Anthony Beard
Anthony Beard
11,914 Points

If I don't set the height of the div wrapping my columns, the default is auto. This will allow each column to individually expand to its own contents, leaving the columns with unequal height compared to each other.

The overflow: auto method would work for scrollbars. I'm not sure I like the way that works in this case, as it removes content navigation away from the main page. However, it does work.

The columns are set to height 80%. The wrapper is set to 100% as Guil did in the video. The only way for the relative height to work is if I set the height of all wrapper containers, including the html element. This allows the relative height of the columns to be set for equal column height, but the height changes depending on the size of the viewport, not on the size of the content. Even the project files Guil made have the same issue.

If there is no purely CSS way to accomplish this (without separate scrollbars), I may have to go with the jQuery method Jeff referred to. I haven't learned jQuery yet, but it's up soon on my list.

Thanks for the feedback!

Tom Asibu
PLUS
Tom Asibu
Courses Plus Student 2,100 Points
Tom Asibu
Tom Asibu
Courses Plus Student 2,100 Points

Will a bottom padding in percentage do? You'll probably have to experiment to find the right percentage at which both divs will match in height. Hope that helps.