Yesterday's CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here's a wrap up of the single best piece of information from each presenter:
Denise Jacobs – Advanced CSS Troubleshooting
The highlight of Denise's talk was some specific coding tips about clearing floated content. She started with the standardoverflow: hidden
method, which falls short with support for borders & margins and also doesn't allow scrollbars if they're needed. Denise suggested instead using overflow: auto; width: 100%;
which avoids these issues. You don't have to use the exact values above, you just have to set some type of overflow
and width
/ height
value.
Denise went on to discuss a .clearfix:after
method, see the gist.
Denise likes this clearing method since it doesn't include any extra, non-semantic markup (as opposed to <br class="clearfix" />
). However the fact that the :after
selector doesn't work in IE6/7 makes this method unusable in my opinion. Ultimately I'm going to stick to the overflow: auto;
method described above.