Question

I was just checking out 906.gs css code and noticed that they made all the floated divs inline.

http://960.gs/demo.html

Just wondering what the purpose of that is…I am always interested in learning CSS theories.

Answer 1

An element with float: left is forced to have a computed display value of block.

For more information on that, see: jQuery in Chrome returns "block" instead of "inline"

The purpose of also adding display: inline is to fix an IE6 bug, the “double margin bug”:

http://www.positioniseverything.net/explorer/doubled-margin.html

A coder innocently places a left float
into a container box, and uses a left
margin on the float to push it away
from the left side of the container.
Seems pretty simple, right? Well it is
until it’s viewed in IE6. In that
browser the left float margin has
mysteriously been doubled in length!

It’s a free fix with no downsides (even in IE6):

That means that {display: inline;} on
a float should be no different than
using {display: block;} (or no display
value at all), and indeed all browsers
follow this specification, including
IE. But, this does somehow trigger IE
to stop doubling the float’s margin.
Thus, this fix can be applied
straight, without any fussy hiding
methods.

In fact, you could just apply the
Inline Fix to all floats if you like,
since there are no known side-effects.
That way the bug can never gain
traction regardless of any margins you
might or might not use.