O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

30Stopping Overflow with Clearfix

If you’ve been doing this as long as we have, you’ve definitely found out about the annoying little problems you can face with stretching divs to containers. Say you have an outer box with an undefined height and an inner box with a height of 100px. The outer box will not automatically stretch to also include the inner box, leaving an ugly overhang.

The Clearfix trick in Compass solves this problem. It makes sure that there’s no overhang if your outer box isn’t defined to be as tall as your inner box. It’s a great way to solve some messy issues you’re having with design.

What To Do...
  • Start with this HTML.
    compass/clearfix.html
     
    <div​ id=​"outer_box"​​>
     
    <div​ id=​"inner_box"​​>​​<p>​Inner Box​</p>​​</div> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required