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

Posted by Paul Murphy
Paul Murphy
6,162 Points

Collapsing footer with the column layout

Hi all,

I've been following Guils videos. He recommended applying the .group which is meant to fix the footer from collapsing and wrapping around the floated elements.

I applied the .group class to my main container with no success the footer still wraps around the columns. Any ideas?

Thanks

3 Answers

Paul Murphy
Paul Murphy
6,162 Points

Paul Yabsley it's there... it's under main layout styles after .grid-container

Paul Yabsley
Paul Yabsley
46,713 Points

Yeah I see it now. Can you post your HTML too?

Paul Murphy
Paul Murphy
6,162 Points

Sorry its a pain having to space in 4 times on every line to post it here

http://codepen.io/paul-masteel/pen/IoytC

Paul Yabsley
Paul Yabsley
46,713 Points

It's a bit difficult to work out exactly what should be happening but if you add the clear:both; property to the footer it should stop it wrapping.

Here is an example: http://codepen.io/paulyabsley/pen/uKylH (See my comments in the css line 59 and 97)

Doing that is effectively the same as adding the group class to the grid-container div. It creates an invisible element after it which clears the floats above it. The thing is that isn't being applied because the grid-container itself is floated left. The sections within the container don't need to be cleared because they aren't floated.

So there are a couple of options:

  1. Don't float the container and the .group clearfix should work
  2. Keep the container floated and just apply clear:both to the footer
Paul Murphy
Paul Murphy
6,162 Points

That has worked Paul, thanks!

Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points
Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points

Did you include that css file in your head?

Paul Murphy
Paul Murphy
6,162 Points

yes

Paul Yabsley
Paul Yabsley
46,713 Points
Paul Yabsley
Paul Yabsley
46,713 Points

Can you post your code so we check it?

If I remember correctly the group class was used to apply a clear fix to an element. You may need to apply the class to the footer rather than the main container. Applying it to the footer should clear the floated elements above it.

Paul Murphy
Paul Murphy
6,162 Points

/* Page Styles ================================ */

* {
    -moz-box-sizing: border-box;
     box-sizing: border-box;
}
body {
    font: normal 1em/1.5 sans-serif;
    color: #222;
    background-color: #fff;
}

img {
    border: none;
    padding: 5px;
    width: auto;

 }





/* Main Layout Styles
================================ */
.main-header {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff; 
    clear: both;
    border-bottom: 15px solid #4FAE88;
}
.main-logo {
margin-top: 0;
margin-bottom: 0;
margin-left: 10px;
font-size: 1.5em;
}
.main-logo a, 
.main-nav a {
    display: block;
    text-align: center;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

.main-nav a { 
    background-color: #36785E; 
}

 .grid-container {
    width: 90%;
    margin: 0 auto;
    padding: 8px;
    background-color: #fff;
    float: left;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}

section {
    background-color: #fff;
    padding: 2px 5px 2px 5px;
}

nav {
    font-weight: bold;
} 
.column-1 {
border-right: 7px double #ccc;
display: inline-block;
background-color: blue;
}
.column-2 {
   background-color: green;
    display: inline-block;
}
.column-3 {
    background-color: grey;
    display: inline-block;
}

footer { 
    text-align: center;
    background-color: orange;
}


 @media (min-width: 768px) { 

/* Main Layout Styles
================================ */

body {
    padding-top: 160px;
}
.main-header {
    position: fixed;
    top: 0;
    width: 100%;
}
.main-header:after {
    content: " ";
    display: inline-block;
    height: 0;
    clear: both;
    z-index: 2;
}
.main-nav {
    float: right;
    padding-right: 50px;
}
.main-nav li {
    margin-top: 65px;
    margin-left: 10px;
    display: inline-block;
}
.second-nav {
    background-color: #ccc;
    margin-top: -10px;
    margin-bottom: 30px;
    box-shadow: 0 0 30px 0 #333;
}
.second-nav img {
    max-width: 100%;

}   
.second-nav li {
    display: inline-block;
    margin: 0 auto;
    padding: 5px 0 5px 75px;
}
.grid-container {
    margin-top: 100px;
}
.selected {
    border: 4px solid;
    border-color: #3F4F8F;
    box-shadow: 0 0 1px 1px #ccc;

}


}


@media (min-width: 1px) and (max-width: 480px)  {

body {
    font-size: 0.8em;

}
img {
    max-width: 70%;
}

.main-header {
    border-bottom: none;
}
.main-nav li {
    margin-top: 12px;
    text-decoration: none;
    list-style: none;
}

.second-nav {
    width: 100%;
    min-height: 120px;
}

.second-nav ul {
    margin: 0 auto;
    width: 90%;
    border: none;
    padding: 0 0 10px 0;
}

.second-nav ul li {
    min-width: 50%;
    min-height: 90px;
    display: inline-block;
    background-color: #fff;
}

.second-nav ul li a {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 5px;
}

}
.selected {
    border: 4px solid;
    border-color: #3F4F8F;
    box-shadow: 0 0 1px 1px #ccc;
}   
.main-logo {
    margin-left: 80px;
}

.grid-container {
    width: 90%;
    margin: auto;
}

}
Paul Murphy
Paul Murphy
6,162 Points

I applied the group class to the footer which seems to have stopped it from collapsing but it is still wrapping to the other columns rather than displaying at its correct place at the bottom of the page.

Paul Yabsley
Paul Yabsley
46,713 Points

I can't see the .group class in your css. You may need to add that.

it is probably something like

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