Okay, this is confusing. Hold on to your socks.

The .clearfix method of clearing divs does not always play well with 960.gs in IE6 (haven't tried IE7). The problem is twofold:

  1. If a div is assigned a container-X class, you must add the clearfix class after it, like so: <div class="container-12 clearfix">.
  2. If a div is assigned a grid-X class, adding clearfix will break your layout. You must used an "inner" div instead, like so: <div class="grid-8"><div class="clearfix">My content</div></div>

This is the pattern I have observed so far. I'm sure there will be more to come.

Comments

dvessel’s picture

I was afraid of this. IIRC, IE7 can fall apart also with clearfix in some situations. I think setting clearfix might be the cause of the other issue too (#422006: reset.css adds 1-2 pixels to bottom of page). The clearfix method does that :after content to self clear and the height of that generated content must be interfering with the line height.

I'll check this all out on the weekend. Oh, and this reminded me that .clear-block was renamed to .clearfix in HEAD for Drupal core. I just committed the change.

Todd Nienkerk’s picture

@dvessel: I'm sure you've already seen this, but check out my note regarding clearfix and the reset.css/1-2 pixels bug. Initial tests suggest they're separate.

I've been doing a lot of research into clearfix lately -- guess why? It's breaking! -- and I'm sorry to say I haven't adequately tested any of this in IE7. (I will try to check it out later today.)

I can say, however, that the IE6 fix described above does work in IE7. I'm just not sure if the underlying problem -- class order -- will break IE7 as well.

Anyway, I made this a "documentation" issue because (1) someone else will likely run into this problem, and (2) I don't think it can (or should) be fixed using CSS. IE6 is not worth the time or headache, especially since this can be solved by reordering classes and using inner divs.

Todd Nienkerk’s picture

Added this to README.txt.

johnantoni’s picture

you could always use the following, been working fine for me for years.

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block;}
* html .clearfix { height: 1%;}
dvessel’s picture

Status: Active » Needs review

Marking this as needing review. The latest dev uses another clearing method copied from 960.gs source.

Might want to zero out the line-height which I normally do like johnantoni.

from 960.css:

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}