garann means > totes profesh

a defunct web development blog

what's wrong with floats? what's wrong with CSS?

Fri, 12 Dec 2008 16:06:23 +0000

Maybe I'm overly sensitive, but it seems like there's been a serious shift in opinion lately away from the use of floats. (Example and example.) I had a rough time even finding out what the reasoning behind this was, but after some googling, it seems like people's issues with the property boil down to two problems:

  1. implementations can be buggy or difficult to predict, and
  2. requires presentational markup
I have trouble swallowing either, mainly because I haven't seen any examples. What I'm paraphrasing here is about as much detail as I could find. It's like the joke: Why did the hipster cross the road? "You don't know?"

So no, guilty, I don't know. The only thing that pops into my head is adding a link or something to the right side of a heading. Generally I'd float that. Yes, if I want to keep my content in the correct order I need to wrap the text of the header itself in a span or something. That kind of sucks. Then again, I've heard people advocate wrapping text you want bold or italicized in a span. That is, I'm not convinced the problem is with float.

What I really lack here is a compelling alternative. Positioning things relatively or shifting elements with margins becomes no less delicate an operation than positioning with floats once a page gets beyond a certain length, and requires the same number of extraneous elements in place. Positioning everything absolutely is fine if your site has no dynamic content. I don't actually remember the last time I worked on a site with no dynamic content. Hey, how many hipsters does it take to change a lightbulb? "You still don't know?" I still don't know.

Anyway, I was reading something interesting about the problems with CSS3 (via Ajaxian), and that seemed to tie into this. Among other things, the author complains that we have to add extra hooks in order to style our elements, and that properties of elements rely on the properties of their parents. Two things that make floating elements, and complex layouts in general, more painful. I was skeptical when I started reading cause, hey buddy, everyone knows that CSS is not supposed to be a programming language and making it so introduces another potential vector for attacks. But he actually talks about that (well, the former):

The CSS WG argue that CSS is meant to be simple, whilst missing the point that CSS is not meant to be anything. It’s a tool that must do a job, and the job has changed over time. CSS needs to keep up with requirements, and the best way to do that is provide adaptable tools rather than pre-packaged modules. There’s continual argument that maths, and dom traversal are too advanced for CSS, which is utter rubbish.

Good point. We obviously need a hybrid scripting/styling language - the author gives the example of designers' reliance on jQuery - and there's no reason that couldn't be rolled into CSS. I may not completely grasp what he means by DOM traversal, but I'm thinking it would be really cool, in the example I gave above with the heading, to go:

h1.myHeader > *[nodeType=3] { float: left; }

I accept that his article may not have been intended to support the heretical and controversial use of floats. I'm just saying let's not hang the entirety of CSS's inadequacies on them.

* I am trying really hard to stay away from the suggestion that people complaining about floats aren't giving them a chance. I'll just say that one of the examples in the first paragraph is clearing floats by adding an extra element, instead of using the ever-popular clearfix or the substantially cleaner overflow:hidden thingy.