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 Basics CSS Layout Project Introducing the Project

Jonathan Glapio
Jonathan Glapio
1,148 Points
Posted by Jonathan Glapio
Jonathan Glapio
1,148 Points

Using clear:both instead of clearfix?

For the css project what are the disadvantages of using clear:both for the footer in the 2 and 3 column layouts? I just added clear:both to the footer in the media queries instead of clearfix. It seems to work for me on my codepen workup https://codepen.io/SelkirkDraws/pen/zKYLyp/ .

sidenote: Pardon any lack of formatting and strange background colors(I'm using the background colors as a learning tool so i can keep everything straight on the page :D).

2 Answers

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Yeah, there are some potential downsides, but it really depends on whether those downsides fit with your design... overflow:auto could create scrollbars in some layouts, and overflow:hidden could cause an element to get clipped if you need it to overflow out of the container, such as a menu that drops down from a header. Gill gives an example of that in one of the videos. The standard "clearfix" way of fixing it is simple and clean, and I don't think there's really any downside. In one sense this is also a "hack", but with no unintended consequences because you're styling an empty element that doesn't even really exist in the markup :smile:

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

From what I can tell of your code, the clear property isn't needed for the footer (go ahead and remove it; you shouldn't see a difference). You need it for the .columns container, which is collapsing because its only contents are floated containers. You don't see that currently because it has a transparent background, but if you add:

background-color: red;
padding: 20px;

to .columns you will see that it is collapsed at the top of the page. If you add a clearfix to the .columns class:

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

it will suddenly appear the full height of the columns.

Jonathan Glapio
Jonathan Glapio
1,148 Points
Jonathan Glapio
Jonathan Glapio
1,148 Points

Thanks so much for the answer. I did like you said and put the background and could see the .columns collapsing in three column mode. Makes it much clearer now.

Looks like two column was ok because third column was clearing the first two.

On a side note and out of curiousity :D...hey i went and added overflow:auto; to the .columns div and it seems to work. Is there downside to using overflow:auto; in this case (other than i read it is seen as a layout hack).

Upon further reading it looks like overflow: auto/hidden probably isn't good as it could interfere with child element spilling out of container(as a desired effect). But still interested in your thoughts on this.

I really appreciate the response(and you digging thru that code-I wish i had commented it better now ^^;).