| 30 | Stopping 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> ...
Get Pragmatic Guide to Sass now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
