CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

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

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

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

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:after {
    content: " "; 
    display: table; 
.clearfix:after {
    clear: both;

From A new micro clearfix hack

Thank you!

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