Templatix Blog

When working with DIV-s (as I’ve been doing, for a while now), if you want a layout going down as long as its contend goes, you’re forced to work with FLOAT-s. That is, with DIV-s that are positioned RELATIVE and that have a float:left or a float:right set up on them.

The Problem
The problem is that the FLOAT’s visual rendering model is an archaic one, dating back when a float was limited to an <IMG>’s align: left / align: right, which allowed the text to flow around an image (or an image to “text-wrap”). Back in the day, a float was limited, conceptually, to < IMG > si < P >. What resulted from the old model? Something like this:

If you look closer, you’ll see that the image included in the first < P > (marked with magenta in the image) has an align=”left” (the functional equivalent of float: left; in CSS), which makes the < P >-s (including the ones to follow) to seamlessly flow around the image. All nice an dandy.

But what do you do when you want that image/float to “force” the height of it’s containing holder? What do you do if you want that < P > -ul containing the image to stretch down in a way to include ALL the image? That was easy peasy with tables, but DIVs make it much harder.

Why? Because, as I was saying: when they conceived and created the specification for the FLOAT model, the dear W3C guys simply considered the above model to be more natural. Don’t ask why. What this means, for the coder? A big’ol pain in the neck, because not only is it a serious issue, but it happens to be a cross-browser one too…

The Solution?

Various tests yielded various solutions for various browsers.

For instance, in IE, setting a height of the DIV was enough. And, in order not to affect the layout, it was best to just set the height to 1% – IE would spread its div-s as needed, anyway, moving through that 1% like mice through cheeze.

But this would wreck a layout in FF – since it had no effect whatsoever. In return, in FF it was enough to manually enter, at the end of the div, an HTML element with the clear:both property. This would force the DIV to stretch beyond that little forcepsed-in element, since clear-both allows no other elements to be in the same line with it, thus forcing the div to stretch below it. To better understand this, here’s another drawing:

(that blue border around that dot illustrates the effect of clear-both;)

But since manually inserting code into the HTML just to get this working is rather un-elegant, they came up with another solution: to take advantage of a FF-specific CSS property: content: “”;. What this does, is it allows you to insert code into the HTML, from the CSS. Obviously, it only works in FF, but it’s useful in it’s way.

How can we apply these 2 solutions so far?

FF:

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

IE:

* html .clearfix {height: 1%;}

After which, in HTML, we give our DIV the class “clearfix”. And so we get to the famous “CLEARFIX” solution, which saved alot of HTML geeks from eternal shame:

.clearfix:after  {content: "."; display: block; height: 0;
                  clear: both; visibility: hidden;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

But wait! IE7 came along… And this trick didn’t work well with it’s majesty… What to do, what to do? Take all the sites you’ve done so far and start re-coding them just because IE7 is so retarded and clients who suddenly discover IE7 see theirs sites messed-up? This dear IE7 provided alot of meat in we-know-who’s mouth, fridge and family, especially since they had the nerve to announce that this would be the latest version, after which no more new CSS stuff to be implemented…

Just our luck (AGAIN) a bunck of good guys humped the problem until thei made it squeak, and found a new solution; modify ONLY the CSS, and ONLY the CLEARFIX section, as follows:

.clearfix:after {content:"."; display:block; height:0;
                 clear:both; visibility:hidden; }
.clearfix       {display:inline-block;}
/* Hide from IE Mac */
.clearfix       {display:block;}
/* End hide from IE Mac */

Once redefined, this piece of CSS code made it all come back to normal, working in all browsers. Good job, guys, thank you for saving me from lots of senseless sweats!