Permalink
Browse files

Changes to make clearfix more bulletproof. Also, makes .container_xx …

…(12, 16, 24) automatically clear floats inside of them. Removed extraneous clearing <div>'s in demo HTML pages.
  • Loading branch information...
1 parent e5b7867 commit 23a1b4934cf03a530a4222e6d6d95fd37fbd1185 @nathansmith committed Jun 4, 2011
View
@@ -620,17 +620,24 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_12:before,
+.container_12:after,
+.container_16:before,
+.container_16:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_12:after,
+.container_16:after {
clear: both;
}
@@ -639,6 +646,8 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_12,
+.container_16 {
zoom: 1;
}
View
@@ -328,17 +328,21 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_12:before,
+.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_12:after {
clear: both;
}
@@ -347,6 +351,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_12 {
zoom: 1;
}
@@ -328,17 +328,21 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_12:before,
+.container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_12:after {
clear: both;
}
@@ -347,6 +351,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_12 {
zoom: 1;
}
View
@@ -417,25 +417,30 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_16:before,
+.container_16:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_16:after {
clear: both;
}
/*
- The following zoom: 1 rule is specifically for IE6 + IE7.
+ The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_16 {
zoom: 1;
}
@@ -417,25 +417,30 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_16:before,
+.container_16:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_16:after {
clear: both;
}
/*
- The following zoom: 1 rule is specifically for IE6 + IE7.
+ The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_16 {
zoom: 1;
}
View
@@ -591,17 +591,21 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_24:before,
+.container_24:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_24:after {
clear: both;
}
@@ -610,6 +614,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_24 {
zoom: 1;
}
@@ -591,17 +591,21 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_24:before,
+.container_24:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_24:after {
clear: both;
}
@@ -610,6 +614,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_24 {
zoom: 1;
}
View
@@ -620,17 +620,24 @@ body {
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
-.clearfix:after {
+.clearfix:after,
+.container_12:before,
+.container_12:after,
+.container_16:before,
+.container_16:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
+ line-height: 0;
width: 0;
height: 0;
}
-.clearfix:after {
+.clearfix:after,
+.container_12:after,
+.container_16:after {
clear: both;
}
@@ -639,6 +646,8 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/
-.clearfix {
+.clearfix,
+.container_12,
+.container_16 {
zoom: 1;
}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

2 comments on commit 23a1b49

FYI... these <div class="clear"></div> still show on the main demo site at http://960.gs/demo.html

Owner

nathansmith replied Jun 28, 2011

They're there for a reason. Some sort of clearing element is still needed for starting new rows, within the same container.

The clearfix class is simply no longer needed for clearing the last (or only) row of "grid_X" elements in a container.

Please sign in to comment.