Make child visible outside an overflow:hidden parent

Question

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children.

But it also has anot

Answer 1

You can use the clearfix to do "layout preserving" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;