Clearfix Clarity

When helping other designers and developers who are learning, the same basic issues come up quite often. One question that always seems to come up is the dreaded Float Collapse. Simply, the parent element will collapse and have no height if the child elements are all floated. Most of the time it isn’t noticeable, although you will notice when you want a background image on the parent element to be visible.

Float Collapse Issue Image

I am not going to explain how floats work, it is summed up very well by CSS Tricks. I am instead going to explain scenarios I was doing that just were over complicating a simple issue and show how I do things now. This post is primarily for referring people who are having the same issue, I often see people making the same mistakes.

When working with the Thematic Framework for WordPress I would run into the issue of float collapse while working with background images sliced from PSD’s. Fixing that is easy, the are multiple ways to do it, often a overflow: hidden; will fix it, but sometimes you need the good ole trusty CSS “clearfix”.

The CSS to make it work.

The CSS for the clearfix is simple, I usually choose to use the micro clearfix hack created by Nicolas Gallagher.

.cf:before, .cf:after { content: " ";  display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

The CSS above makes it seem like you have to add a class to perform the clearfix, so all you have to do is add a class of .cf and boom fixed!

Well…. the key is you don’t have to add a class or any additional HTML markup at all. The goal is to not add anything to the HTML markup that isn’t required, especially something in the styling realm like a CSS clearfix.

Friends don’t let friends clearfix like this.

A long time ago I decided I would use jQuery to add the class of .cf to the parent sections that needed it, simple.


The problem is this relies on jQuery and it takes a little time to load so there would be a flash of unstyled content, albeit most of the time it was barely noticeable, it still bugged me.

Instead of using jQuery, I opted to go the route of adding the .cf class to the sections where needed.

<div id="main" class="cf"></div>

Or if not possible, adding a completely new element with a clearing class, clear: both; to essentially clear the floats which also works to remedy the float collapse.

<br class="clear">

While better in terms of performance, fixing the FOUC, this was now polluting the structure of the actual HTML site with unneeded markup.

How I clearfix now.

I will be the first to admit, I felt pretty stupid when I figured out there is no need to add a new class at all. Instead, just change the CSS on the clearfix to the existing ID/class.

#main:before, #main:after { content: " ";  display: table; }
#main:after { clear: both; }
#main { *zoom: 1; }

Much better and no need to add additional markup to the HTML structure.

If you are a bad ass and use Sass/Compass in your working environment, it is even easier to add letting the preprocessor handle the output.

#main { @include pie-clearfix; }

So hopefully I never see you using another clearfix class in the actual HTML again. This same thing of not adding unnecessary classes applies to grid frameworks, in the same exact way, but that is another blog post.


Thematic and Modernizr

The Thematic Theme Framework for WordPress is getting older, but if you don’t absolutely need a HTML5 site, there really isn’t any reason not to use it for custom theming. A recent project of mine required CSS3 transitions, but older browsers like IE 6-9 won’t do transitions. That is where the powerful little Modernizr comes in handy, it helps provide a clean and easy way to provide a fallback to keep the page functional.

CSS Transform Fallback

In the above image from I can use the latest and greatest CSS3 techniques on the left to turn the text with transitions, but still have graceful fallback on the right for older browsers.

While Modernizr can do a lot more, it is perfect for using with Thematic for CSS fallbacks.

Using Modernizr with Thematic

Snag the script from the custom build section and check off the CSS features you need to detect, in my case it is CSS3 Transitions. You can select to test for all features which may help when developing, but for production include only what is needed (for speed). Remove the extras which are typically for HTML5 builds, click generate and in your child themes /js/ folder, if you don’t have one, make one and save the file as modernizr.js.

Once you have your script in place, drop this in your functions.php in your child theme. This snippet will work for adding Modernizr to any WordPress installation, not just Thematic.

// script manager template to register and enqueue files
function childtheme_script_manager() {
    // wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );

    // registers modernizr script, stylesheet local path, no dependency, no version, loads in header
    wp_register_script('modernizr-js', get_stylesheet_directory_uri() . '/js/modernizr.js', false, false, false);

    // enqueue the scripts for use in theme
    wp_enqueue_script ('modernizr-js');

add_action('wp_enqueue_scripts', 'childtheme_script_manager');

Update: 2012-14-6 Previously I was just using wp_enqueue without registering the script, but it is better to both register and enqueue. Minor, but changed to promote best practices.

What the enqueue snippet is doing.

The snippet above is handy also acting as a template to manage scripts, so you can add all your scripts in this one “script_manager” and use the template portion to know the correct order, for more information there is a good article on the correct way to enqueue. Cake.

Is it working?

If you were to right click on the source code, you won’t see it. If you use Firebug, and look in the html code tag, you should see the replacement looking something like this, depending on what classes you selected to add.

<html lang="en-US" dir="ltr" class=" js flexbox canvas canvastext postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache">

So now that you have a CSS class to target, you can target that html class and if it isn’t present, it won’t be applied, just like the graphic above. There is a bunch more to Modernizr I am omitting, but I just haven’t had the opportunity to use the more powerful features.

Thematic Sideways Date

So with Modernizr working, I can now take my non-sideways Thematic post date styling article, and change it up by targeting that specific .csstransitions class to only do the fancy CSS3 styling, if it is available. Otherwise just do the default styling which is nothing but displaying the date the date normally, because if you use IE 6, 7 or 8, you deserve it.

.csstransforms .entry-date { position: absolute; top: 60px; left: -65px; width: 96px; heigth: 26px; text-align: center; padding-left: 5px; background: url(images/content-date.png) no-repeat; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); }
.csstransforms .entry-date span { font: 14px/26px Tahoma, Verdana, Segoe, sans-serif; color: #f1f1f1; text-align: center; text-transform: none; letter-spacing: 1px; }
.csstransforms .entry-date .year, .csstransforms .entry-date .sep { display: none; }

Thematic 2.0 “no-js” Class

If you need to add the no-js class to Thematic 2.0 for Modernizr to change to js, you can do that with this snippet.

function childtheme_html_class( $class_att ) {
    $class_att = "no-js";
    return $class_att;
add_filter( 'thematic_html_class', 'childtheme_html_class' );

This just throws up a class you can use for CSS to detect if JavaScript is enabled, for example on a mobile navigation, since the toggle for the button is what invokes the drop down, if no JavaScript is present, you won’t be able to see the list. With Modernizr if you set up your CSS correctly it will automatically display the list if no JavaScript is available.

If you needed to do this with Thematic 1.+ versions, maybe look into how I did it with Faking the HTML5 Boilerplate conditional classes with Thematic.


Scroll to Top for Thematic

I will be recreating the exact functionality of the original Animated Scroll to Top from, but for use on the Thematic Framework for WordPress. It won’t take you very long to realize that the way it is set up isn’t very useful for some of Thematic’s default layouts without some CSS love. Either way, with some slight modifications, this is a very handy little feature and a good introduction to how to bolt on some jQuery functionality into a Thematic Child Theme.

This will not work for Thematic, you will need the latest stable development release. There is an problem with the footer-extensions.php in the older version.

All this involves files inside your Thematic Child Theme, hopefully you have that child theme thing down already and why it is important. For example purposes, the name of my child theme is “scottnix”.

Create a custom.js file

Child Theme Scripts Folder Example

In your child theme, if you don’t already have one, create a folder called “scripts”. In that scripts folder then create a “custom.js” file and insert the jQuery code (below) which will target the #back-top html we will be adding.

        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 100) {
            } else {
        jQuery('#back-top a').click(function () {
                scrollTop: 0
            }, 800);
            return false;

Add to functions.php

The first function “childtheme_scroll_to_top_script” will load your custom.js file, It will correctly enqueue the script in the footer. The idea behind calling it in the footer is the site content will load before the script, which gives the illusion of a faster loading site.

The second function “childtheme_override_siteinfoclose” will override Thematic’s standard siteinfoclose and add in the additional html. I have also modified the link to jump to the #wrapper, since out of the box, this is the top most ID in Thematic.

// loads custom.js file right above the closing body tag.
function childtheme_scroll_to_top_script() {
    wp_enqueue_script('scroll_to_top', get_bloginfo('stylesheet_directory') . '/scripts/custom.js', array('jquery'), '1.0', true);
add_action('wp_enqueue_scripts', 'childtheme_scroll_to_top_script');

// override existing siteinfoclose to add the html right inside the #siteinfo div
function childtheme_override_siteinfoclose() { ?>
    		<p id="back-top"><a href="#wrapper"><span>Back to Top</span></a></p>
	<!-- #siteinfo -->  

Add to style.css

Pretty self-explanatory here, just add this to your CSS. At the least I would recommend putting it near the rest of your site info/footer CSS just to keep the document well structured.

#back-top { position: fixed; bottom: 30px; margin-left: -150px; }
#back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover { color: #000; }
#back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(images/scroll-to-top.png) no-repeat center center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover span { background-color: #777; }

Add the image

Child Theme Images Folder Example

Hopefully you already have a images folder, if not create one in your child theme and drop in a image named “scroll-to-top.png”, although you should already be able to see the functionality already working without it.

That’s it

For this site I chose to go a little bit of a different route and have built it into my WordPress 3.0 Menus since my site is no longer built on Thematic. Even if you don’t use a fixed position the script is useful because it will not be invoked if the page is too short and it will give you the smooth scrolling.