Skip to content

Commit

Permalink
Changes to make clearfix more bulletproof. Also, makes .container_xx …
Browse files Browse the repository at this point in the history 
…(12, 16, 24) automatically clear floats inside of them. Removed extraneous clearing <div>'s in demo HTML pages.
  • Loading branch information
@nathansmith
nathansmith committed Jun 4, 2011
1 parent e5b7867 commit 23a1b49
Show file tree
Hide file tree
Showing 20 changed files with 82 additions and 52 deletions.
15 changes: 12 additions & 3 deletions code/css/960.css
View file
Expand Up @@ -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;
}

Expand All @@ -639,6 +646,8 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
.clearfix,
.container_12,
.container_16 {
zoom: 1;
}
11 changes: 8 additions & 3 deletions code/css/960_12_col.css
View file
Expand Up @@ -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;
}

Expand All @@ -347,6 +351,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
.clearfix,
.container_12 {
zoom: 1;
}
11 changes: 8 additions & 3 deletions code/css/960_12_col_rtl.css
View file
Expand Up @@ -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;
}

Expand All @@ -347,6 +351,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
.clearfix,
.container_12 {
zoom: 1;
}
13 changes: 9 additions & 4 deletions code/css/960_16_col.css
View file
Expand Up @@ -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;
}
13 changes: 9 additions & 4 deletions code/css/960_16_col_rtl.css
View file
Expand Up @@ -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;
}
11 changes: 8 additions & 3 deletions code/css/960_24_col.css
View file
Expand Up @@ -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;
}

Expand All @@ -610,6 +614,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
.clearfix,
.container_24 {
zoom: 1;
}
11 changes: 8 additions & 3 deletions code/css/960_24_col_rtl.css
View file
Expand Up @@ -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;
}

Expand All @@ -610,6 +614,7 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
.clearfix,
.container_24 {
zoom: 1;
}
15 changes: 12 additions & 3 deletions code/css/960_rtl.css
View file
Expand Up @@ -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;
}

Expand All @@ -639,6 +646,8 @@ body {
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
.clearfix,
.container_12,
.container_16 {
zoom: 1;
}
2 changes: 1 addition & 1 deletion code/css/min/960.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 comments on commit 23a1b49

@gmclelland
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@nathansmith
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.