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 Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Posted by dariorancatore
dariorancatore
6,845 Points

Overflow hidden

At the beginning of the video Guil used for styling the page:

.content, .main-header { overflow: hidden; }

I don't understand why he used the overflow for 2 divs Can someone tells me the reason?

Thanks in advance.

2 Answers

Liam Linacre
Liam Linacre
Courses Plus Student 386 Points

This is for clearing the containers with floated items inside them, commonly known as a 'clearfix'.

As the viewport grows for the design in that video we start to float parts of the content. If we didn't use oveflow hidden you would notice that the containing elemt of the floated items seems to collapse, which is problematic if you have a background for the containing element.

Try removing the overflow:hidden; and see what happens.

See this for a better explanation: CSS Foundations: Floats

dariorancatore
dariorancatore
6,845 Points

Thank you Liam. Can you please tell me why the main div collapses without using the 'clearfix' or 'overflow: hidden'. Thanks :)

Liam Linacre
Liam Linacre
Courses Plus Student 386 Points

Very good question, i don't really know the answer..

It has something to do with the floated elements being taken out of the normal flow of the page so the containing element doesn't know how big they are and gives it a 0 height.

The problem comes form using floats for layouts. One day ( possibly today!) we won't need floats, we'll use other layout techniques)

These links can probably explain it better than i can, as i don't really understand it.

There are also other ways to "clear" an element, sometimes overflow:hidden can cause problems, like when elements might overflow the container. For those times i like to use this:

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}

From A new micro clearfix hack

dariorancatore
dariorancatore
6,845 Points

Thank you!

shezazr
shezazr
8,275 Points
shezazr
shezazr
8,275 Points

if you have a square box of say width: 20cm & height 20 cm. You try to put something else which has width 19cm but height 30cm. It will go in but be sticking out by about 10cm.. so to make it fit the design, you may choose to "hide" it... well you can't do it in real life but in CSS terms that is the overflow: hidden property