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

Watch Video

Posted June 19, 2014 4:43pm by

Controlling Floats...

Hey…

I made a website similar to the example that is used in the floats section in the CSS Layout Techniques. Specifically, I have 3 columns called primary-content, secondary-content and extra-content.

The video is good, but I don't know how to get the columns to go down the entire way to the footer. I gave each column a color, but the color doesn't extend all the way down to the footer, and the rest of the area is white. Is there a way to solve this?

June 19, 2014 6:27pm

Hi Robin,

Do you have a situation where one of your columns is longer than the others and does reach all the way to the footer and you simply want the backgrounds of your other two shorter columns to also extend down to the footer?

June 19, 2014 11:03pm

Hi Jason,

Yes, that's exactly the problem. One of my columns reaches the footer and the others don't.

June 19, 2014 11:26pm

What I finally did to get it to look the way I want is that I gave the class for all the columns, .col, a height value of 400px.

/*******************
THINGS THAT HAPPEN 
TO ALL COLUMNS
*******************/

.col{
  float:left;
  width:33.33333333%;
  padding:20px;
  box-sizing:border-box;

  height:400px;


}

the columns now go to the bottom, to the footer. It's the only way I got it to work.

June 20, 2014 12:52am

Robin,

My only concern with setting a fixed height div is that it may cause a problem with overflow that could hide content or cause scrollbars. You might want to try the following:

html,
body,
.wrapper,
.col {
  height: 100%;
}

.col {
  display: inline-block;
  width: 33.3333%;
  margin-right: -5px; /* Corrects a whitespace issue */
  vertical-align: top;
}

That should get you the basic layout. Inline block also eliminates the need to apply clear fixes since the elements stay within the normal flow of the content.

5 Answers

June 21, 2014 7:31pm

Hi Robin,

I agree with Keith Kelly that you should not set a fixed height on your columns. You will have overflow problems as soon as your users increase the font size in their browser.

There are some older techniques for implementing equal column heights and one of them might work out for you here. I haven't been through this project here so I don't know what will or won't work out.

Here's an article outlining some of the different techniques: http://css-tricks.com/fluid-width-equal-height-columns/

I personally like to use the one under the heading "One True Layout Method". I've done a codepen demo for you to illustrate that technique: http://codepen.io/anon/pen/HqiFe

I've made the 1st column here the longest one but any of the columns can be the longest one and the others will extend down to the footer.

The important things are that the columns need to have a containing div so you can set overflow: hidden to hide all that extra bottom padding.

Then each column needs a large bottom padding and an equally large negative margin to bring the document flow back up to the content.

If you need to have some actual padding at the bottom of your columns then you can make the bottom margin a little less.

Example:

padding-bottom: 9999px;
margin-bottom: -9979px;

Here the document flow isn't brought all the way back up to the content. It stops short by 20px and so this has the affect of giving you 20px of padding at the bottom of each column.

June 22, 2014 6:13pm

Thank you Jason… I like that solution the best.

June 19, 2014 6:13pm

When working with equal height columns it can be a little tricky to get everything to layout correctly and requires a good bit of coding to accomplish. One option you might want to look into is flexbox. Flex gives you many different alignment options including stretch that will give you equal height columns.

Treehouse has a video on flexbox here: http://teamtreehouse.com/library/css-foundations/flexbox-and-multicolumn-layout/flexbox-part-1-2

Looking at the latest support on caniuse.com flexbox is supported by almost all modern browsers.

June 19, 2014 6:32pm

It only has about 82% total support. I don't know that I would use it in production just yet. I suppose it depends on what you're targeting.

June 19, 2014 6:33pm

Non IE users.

June 19, 2014 6:43pm

The only current browser that doesn't support it at all is Opera Mini and IE 8 & 9. Everything else will work with at least a vendor prefix. Unfortunately IE has that tendency to throw a wrench in the works.

June 19, 2014 8:41pm

I was just watching the column layout with inline-block display video and it looks like this solution would work as well. Gil lays out the columns as inline-blocks. Then while setting the "sticky" footer set the heights to 100% and all of the columns layout correctly.

Take a look at the video here:

http://teamtreehouse.com/library/css-layout-techniques/display-modes/column-layout-with-inlineblock

I think this might be a very simple solution to what you are looking to do.

June 22, 2014 6:14pm

Thank you Keith.

June 19, 2014 5:05pm

Well, first you need to get rid of any margin or padding. Second set the height to 100%.

June 19, 2014 5:20pm

I set things to 100%. It still doesn't work the way I want.

/*******************
WRAPPER
*******************/

.wrapper{
  width:95%;
  margin:0 auto;

  height:100%;


}

/*******************
HEADER
*******************/
.main-header{
  background:rgba(100, 200, 255, 1);

  height:100%;



}

/*******************
LOGO
*******************/

.main-logo{
  background:rgba(100, 200, 100, 1);
  width:100px;
  text-align:center;
  float:left;
  margin-top:0;
  margin-right:10px;
  padding:20px;
  border-radius:5px;
  border:1px solid black;
  color:white;

  height:100%


}

/*******************
BUTTONS
*******************/

.main-nav li{
  background:rgba(100, 200, 100, 1);
  width:100px;
  float:left;
  text-align:center;
  list-style-type:none;
  padding:10px;
  border-radius:5px;

  margin-right:10px;
  margin-top:10px;
  border:1px solid black;

  height:100%;




}

/*******************
IMAGES
*******************/

.organ{
  width:50%;
  float:left;
  margin:0 15px 10px 0;

  border:1px solid white;
  padding:5px;

}

.bridge{
  width:50%;
  float:left;
  margin:0 15px 10px 0;

  border:1px solid white;
  padding:5px;


}

h2{
  margin-top:0;

}


/*******************
TAKING AWAY PADDING 
FROM LIST OR 
FROM .main-nav CONTAINER
*******************/


.main-nav{

  padding-left:0;
  float:right;

  height:100%;


}

/*******************
REMOVING UNDERLINE
ON LINKS
*******************/


a{
  text-decoration:none;
  color:white;
}


/*******************
BLOCKS OF CONTENT
*******************/

.secondary-content{
  background:rgba(200, 100, 160, 1);
  color:white;

  height:100%;





}

.main-banner{
  background:rgba(170, 170, 170, 1);
  padding:20px;
  color:white;

  height:100%;


}

.extra-content{
  background:rgba(160, 200, 100, 1);
  color:white;

  height:100%;



}
.main-footer{
  background:rgba(100, 100, 100, 1);
  color:white;
  padding:20px;
  box-sizing:border-box;

  height:100%;



}

.fourth-content{
  background:rgba(100, 0, 90, 1);
  color:white;

  height:100%;

}

.fifth-content{
  background:rgba(50, 100, 50, 1);
  color:white;

  height:100%;


}

/*******************
CLEARFIX
*******************/

/*br{
clear:both;

}*/

.group:after{
  content:" ";
  display:table;
  clear:both;

}

/*******************
THINGS THAT HAPPEN 
TO ALL COLUMNS
*******************/

.col{
  float:left;
  width:33.33333333%;
  padding:20px;
  box-sizing:border-box;

  height:100%;


}

/*******************
OVERRIDING CERTAIN
THINGS FOR SPECIFIC
COLUMNS
*******************/

.primary-content{
  background:rgba(60, 100, 160, 1);
  color:white;

  height:100%;



}

.fourth-content{
  width:50%;

  height:100%;


}

.fifth-content{

  width:50%;

  height:100%;


}

June 19, 2014 6:38pm

Hi Jason,

Yes, that's exactly the problem. One of my columns reaches the footer and the others don't.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

robinbehroozi

robinbehroozi

Controlling Floats...

Jason Anello

Jason Anello

robinbehroozi

robinbehroozi

robinbehroozi

robinbehroozi

Keith Kelly

Keith Kelly

5 Answers

Jason Anello

Jason Anello

robinbehroozi

robinbehroozi

Keith Kelly

Keith Kelly

Jason Anello

Jason Anello

Carman A

Carman A

Keith Kelly

Keith Kelly

Keith Kelly

Keith Kelly

robinbehroozi

robinbehroozi

Carman A

Carman A

robinbehroozi

robinbehroozi

robinbehroozi

robinbehroozi