diff --git a/examples/compass/src/utilities.sass b/examples/compass/src/utilities.sass index b83c7fd0..cc885b0f 100644 --- a/examples/compass/src/utilities.sass +++ b/examples/compass/src/utilities.sass @@ -84,3 +84,18 @@ h2 +float-left .float-right-example +float-right + .pie-clearfix-example + :background #ddd + :border 2px solid black + :text-align center + :position relative + +pie-clearfix + .positioned-example + :display block + :position absolute + :left -10px + :top -10px + :font-size 10px + :width 10em + :background #ccf + :border 1px solid black diff --git a/examples/compass/utilities.html.haml b/examples/compass/utilities.html.haml index 341ec0ca..0cd663e4 100644 --- a/examples/compass/utilities.html.haml +++ b/examples/compass/utilities.html.haml @@ -138,18 +138,23 @@ %th Totals %td.numeric.even 15.5 %td.numeric.odd 16.0 - %td.numeric.even 17.5 + %td.numeric.even 17.5 #floats .example %h2 Floats + %p + The float helpers add fixes for the double-margin float + bug, so you don't need to remember. %p Floated elements will extend beyond the bottom boundary of their parent container unless a %code.mixin +clearfix is applied to the parent. %p - The float mixins add fixes for the double-margin float - bug, so you don't need to remember. + The regular + %code.mixin +clearfix + method uses overflow:hidden. This is a simple and reliable way to + get your box wrapped around your float elements. .clearfix-example .float-left-example This div is styled with @@ -161,3 +166,20 @@ and it should be 20px from the right edge, even in IE6. This div is styled with %code.mixin +clearfix + %p + An alternate clearing method is provided for when elements need + to be positioned to hang outside the box. This is based on the + \:after content method. + .pie-clearfix-example + .float-left-example + This div is styled with + %code.mixin +float-left + \. It is taller than its parent and it should be 20px from the left edge. + .float-right-example + This short div is styled with + %code.mixin +float-right + and it should be 20px from the right edge, even in IE6. + This div is styled with + %code.mixin +pie-clearfix + .positioned-example + Using this clear method, this positioned box is not cut off. diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass b/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass new file mode 100644 index 00000000..e64afef3 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass @@ -0,0 +1,24 @@ +@import hacks.sass + +//** + Extends the element to enclose any floats it contains. + This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container. + Recommendations include using this in conjunction with a width: + http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html +=clearfix + :overflow hidden + +has-layout + +//** + Extends the element to enclose any floats it contains. + This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS. + http://www.positioniseverything.net/easyclearing.html +=pie-clearfix + &:after + :content " " + :display block + :height 0 + :clear both + :overflow hidden + :visibility hidden + +has-layout diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_float.sass b/frameworks/compass/stylesheets/compass/utilities/general/_float.sass index 505d08b8..fad376bd 100644 --- a/frameworks/compass/stylesheets/compass/utilities/general/_float.sass +++ b/frameworks/compass/stylesheets/compass/utilities/general/_float.sass @@ -1,14 +1,5 @@ -// Clearing floats without extra markup -// Simple Clearing of Floats -// [http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/] -=clearfix - :overflow auto - :overflow -moz-scrollbars-none - // This makes ie6 get layout - :display inline-block - // and this puts it back to block - & - :display block +//**\\ + Float // Implementation of float:left with fix for double-margin bug =float-left diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_hacks.sass b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.sass new file mode 100644 index 00000000..19417ee1 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.sass @@ -0,0 +1,6 @@ +=has-layout + // This makes ie6 get layout + :display inline-block + // and this puts it back to block + & + :display block