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... |
compass/clearfix.html | |
| <div id="outer_box"> |
| <div id="inner_box"><p>Inner Box</p></div> |
| <p>I'm in the outer box</p> </div> |
compass/clearfix_original.scss | |
| #outer_box { |
| width: 500px; |
| border: 4px solid black; |
| #inner_box { |
| float: left; |
| width: 200px; |
| height: 100px; |
| background: gray; } } |
compass/clearfix.scss | |
| @import "compass/utilities/general/clearfix"; |
| |
| #outer_box { |
| @include clearfix; |
| width: 500px; |
| border: 4px solid black; |
| #inner_box { |
| float: left; |
| width: 200px; |
| height: 100px; |
| background: gray; } } |