Over the last few weeks I’ve been looking at different methods of clearing floats in CSS with the aim of implementing one as the standard for use on PagePlay sites. For those that are asking “Which clearfix should i use?”, I’m going to sum up the advantages and disadvantages.

The “clear” property way

The quickest and worst way to clear floats. This method is implemented by adding an element with clear: both or clear: left/right after floated elements.

e.g.
<br style=”clear:both” />

or

<div style=”clear: both;”>&nbsp;</div>

Advantages:
- Using the “clear” property is technically the right way to clear floats.
- Good browser compatibility

Disadvantages
- Increased size for html files, causing slower page loads.
- Has no semantic value
- Looks bad to other developers.

The “overflow” property way

Giving the element that contains floated elements an overflow value of “hidden” will clear the floats. Specifying a width for the element ensures that you get the same result in IE6.

e.g.

.container
{
   overflow: hidden;
   width: 100%;
}

Should you need width to be unspecified, you can use “zoom: 1″ instead. This could be used in a conditional comment if you’re bothered about CSS validation.

Advantages:
- Good browser compatibility

Disadvantages:
- The unspecified width version is slightly more complex to setup.
- Hides element overflow. (If your container is “position: relative” and you have elements positioned absolutely outside of it, these elements won’t be visible)

Source: http://www.quirksmode.org/css/clearing.html

The “:after” Pseudo-class way

Modern browsers support the use of pseudo-classes, which have led to the development of a number clearfixes using the “:after” pseudo-class.

These methods work in a similar way to the original “clear” method but the content is generated using CSS rather than using an empty HTML element. There are several variations of this type of clearfix…

Positioniseverything.net – Easy Clearing

.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix
{
zoom: 1;
}

The latter class could be used in a conditional comment for IE only, as mentioned previously.

Source: http://www.positioniseverything.net/easyclearing.html

perishablepress.com

.clearfix:after
{
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}

* html .clearfix
{
   zoom: 1;
   /* IE6 */
}

*:first-child+html .clearfix
{
   zoom: 1;
   /* IE7 */
}

There’s no need to use conditional comments for the IE6 and IE7 clearfix classes as the selectors used only work in those browsers.

Source: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Thierry Koblentz’s Clearfix reloaded

.clearfix:before,
.clearfix:after
{
   content: ".";
   display: block;
   height: 0;
   overflow: hidden;
}
.clearfix:after
{
   clear: both;
}

.clearfix
{
   zoom: 1;
} /* IE 5.5/6/7 */

The latter class could be used in a conditional comment for IE only, as mentioned previously.

Source: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
More: http://www.tjkdesign.com/lab/clearfix/new-clearfix.html

Micro Clearfix

.cf:before,
.cf:after
{
   content:"";
   display:table;
}

.cf:after
{
   clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf
{
   zoom:1;
}

Again the latter class could be used in a conditional comment for IE only, as mentioned previously.

Source: http://nicolasgallagher.com/better-float-containment-in-ie/

Advantages:
- Great for repeated use, simply add.

Disadvantages:
- All but Thierry Koblentz’s – Clearfix reloaded cause vertical margins to collapse  – See http://www.tjkdesign.com/lab/clearfix/new-clearfix.html for examples

So which to choose?

I’ve been using the overflow method for a long time now and there’s only been a couple of times that using it has caused problems, usually caused by the width or absolutely positioning issues mentioned above. I would recommend it’s use in most circumstances.

If you need a solution that can support dynamic widths on containers or elements positioned absolutely outside of its containing element, use Thierry Koblentz’s Clearfix reloaded.

We’re currently dealing with an interesting question from one of our best clients. For the purposes of this post, we’ll call it “Barry’s Biscuits”. Barry’s task is to build a global brand, though currently his online shop only caters for the UK. Experiencing strong growth through the shop we’ve built for him, Barry’s now planning to work with trusted partners to deliver the brand in other markets.

With a strong sense of how he wants to manage his brand communications, Barry has set us a challenge and suggested how the website should deal with visitors from those others markets.

Currently ‘barrysbiscuits.com’ shows the UK-focused website and online shop. Barry wants to give visitors the appropriate site and shop for their region when they go directly to the .com address. He would prefer visitors not to have to choose their country on the first page, or for there to be a default country selection which they then have to change.

From the outset we know that detecting a visitor’s location from their IP address is an option, if a potentially flawed one. We also know that many of the best-known and successful global brands do not operate geolocation-based redirection in the way Barry wants to.

Our approach to this was – as with anything – to gather some useful research to develop our own understanding before making some informed recommendations to Barry.

What are the important and uncontroversial facts?

Each country site needs its own URL and own content in order to be properly indexed by search engines.

Detection of location is done by IP address and is not always reliable. IPs get reassigned and the location result is only as good as how up-to-date the database your subscribing to is.

Most people do not reach your website by typing in barrysbiscuits.com to their address bar. Search engines have secured their place as the key gateway to most websites.

You cannot hide content for one country from those in another. So your prices, product names etc are still available to those who want to see them. The important thing is to make it easier or more obvious for them to see the content which is most relevant to them.

How some global brands do it

1. Apple

http://apple.com gives you the US version of the site. Regardless of where you enter this URL around the world, you always get the US site. You then have to use the flag at the bottom of the screen to choose a different country, be it UK, Ireland or even Cameroon.

1. Ikea

http://ikea.com gives you the global landing page and asks you to select your country. This is a very common approach

1. Dyson (by far the most interesting and seemingly sophisticated)

http://dyson.com from the UK gives you dyson.co.uk automatically. From the US it gives you their US site automatically. From the Netherlands it automatically gives you a page where you can choose your country.

Why might mainland Europe might be different? It could be harder to know with certainty which country someone is in from their IP address and so rather than have lots of Dutch looking at Belgian sites in error – they make the choice more explicit. It would be interesting to know more about this as our conclusions are fairly intuitive.

1. Amazon

http://amazon.com takes you to the US site from wherever you are, but then gives you a message to encourage you to which to the correct site.

It’s about more than what you type in the address bar

What the website shows when you arrive from different places around the world after typing in the main URL.

What results are shown on Google when someone types in your brand name from different places around the world.

We can flag the different versions of the site as being primarily relevant to specific territories using Google Webmaster tools. This means that when someone Googles “barrys biscuits”, in Australia, they will see search results from your Australian site first.

This element of Google Webmaster Tools was created for this specific purpose – when there is content which is only relevant to people in a specific area. So you wouldn’t use it to flag French language content else you’d risk excluding many Canadians from reaching the results easily.

This is exactly what Apple does. This suggests to us that Apple has accepted that the most efficient way to target traffic to the right regional site is through appropriate search listings.

For Barry, who had a very strong sense of how he wanted the site to work, our initial recommendation was to follow the Dyson model. Have re-direction in place, but be ready to keep its results under constant review and accept that the approach may have to change or be varied by territory if necessary.

Geolocation on the basis of IP address is by no means an exact science. Location is an increasingly important digital dynamic, and so there are much better ways to determine where someone is – especially when it comes to mobile devices. This may mean the question of whether to use IP to check where some one is will cease to be relevant.

As Matt reminded us recently, the very notion of manually entering domain names to the address bar is becoming forgotten in favour of searching. So perhaps the key conclusion is the dominance of search. The best method – as ever – may be to do right by people trying to find you in search.

Recently, when watching friends, family and customer use the internet, I’ve noticed a greater tendency for them to search for websites rather than navigating straight to the site by entering the URL into the address bar. It now seems safe to say that when given a web address, more often than not people will try to search for the address on Google. Those who have been using the internet for a long time might find this odd as using the address bar used to be the only way to navigate. As time has gone on, the internet has become mainstream and now many people who haven’t been forced to use the address bar or who haven’t been taught how to use a web browser at school don’t know how to use it properly.

Advertisers clearly have also realised this, occasionally using “Search Honda on Google” rather than giving the URL. Not using the address bar is clearly an advantage in this case, remembering one or two words related to a product or brand is far easier than remembering a long URL. Recently published stats from Google also place Facebook, Yahoo and Google itself amongst the top searches of 2011, confirming that searching rather than using the address bar is widespread.

In most cases it’s quite obvious what the domain could be, such as Facebook.com, but still search is preferred to using the address bar. It’s safe to assume that people want to be sure that they are going to the right address when they are unsure of the full URL of the site (whether the site uses .com .co.uk .net etc). Taking this into consideration, Searching for a site may be faster in some circumstances.

It might be also be that some users find searching for websites easier or may do it through habit. The majority of browsers these days include bookmark, history and web searching within the address bar, so you only have to type a word or two into your address bar to either search the web, your bookmarks or view sites you’ve been to previously. It’s easy to see how this would influence how people use the web as a whole, as searching for your favourite sites in this way would get you into a habit of searching for all of your websites. A Mac application called Alfred and Linux-based operating system Ubuntu also work in a similar way to these all in one address bars, allowing the user of the computer to type a couple of words into a text box to open application, search for files and complete many other functions.

Searching for sites rather than navigating to them directly is fine most of the time, however it can be an issue when a site needs to be hidden from search results but you still need a number of people to have access to it.

Users of the internet will always navigate the web the way that they find easiest. It’s not up to web designers or developers to tell them how they should use the internet, we should understand how they work and make it easy for them to find what they need to find. After all, if you make something difficult for someone to do, the likelihood is they won’t do it.

As you probably already know, CSS is one of the main languages used to build websites. Whereas HTML is used to define the structure and content of a website, CSS tells a web browser how a website should be displayed, defining everything from font sizes to the layout of pages.

I’ve often thought that it would be great if CSS could include some of the functionality found in programming languages to lessen the amount of code required and speed up development. A couple of weeks ago i came across LESS, which does everything i had wished for and more.

LESS gives us variables, mixins, operations and functions, which i will go into a bit more detail about below.

PagePlay

We have loads of great designs available for use with PagePlay sites. When a customer signs up to PagePlay on either a Bronze or Silver setup package, we take one of these existing designs chosen by the customer and amend it to fit their needs. Using LESS we can make this process as simple as changing a few variables at the top of the stylesheet.

CSS3 browser specific properties

Until recently the proper CSS property for border-radius hasn’t been available (in Firefox at least), meaning if we wanted to do something like add rounded corners to an element we had to add both the webkit and mozilla browser specific alternatives (-moz-border-radius and -webkit-border-radius) instead of one simple property. Even now that this property is available, we still have to add three properties to ensure rounded corners are shown in older versions of the browser (where border-radius) doesn’t feature. Multiply this multiple times over a CSS file and we’ve got many many lines that we shouldn’t really need to write.

Using LESS we can use a Mixin to limit the amount of code we write. By setting up the following mixin…
and using in our LESS like the following…

Our CSS will appear like this…

Lessphp

Once you have created your LESS file, it needs to be compiled into regular old CSS. There’s a number of LESS compilers around that can do this job for you, but one that caught my eye was a PHP implementation. This allows us to upload .less files directly to the server and they will be automatically compiled into CSS when they are first used. A handy function is also provided that compiles LESS files and saves them as CSS files only when needs (when a change has been made to the LESS files).

So in our PHP implementation we just need a bit of LESS as a style.less file…

Two lines of PHP…

And the following style.css file is ready for us to use in the same directory…

Take a look at http://lesscss.org for more details of all the wonderful things that LESS can do.