Creating CSS layouts using harsh language

There is a scene in Aliens 2 where soldiers are about to engage in combat with aggressive alien life-forms only to be told to unload their weapons. Private Frost asks: What the hell are we supposed to use, man? Harsh language?

Dave Baron’s recent post Overuse of floats considered harmful reminds me of this scene.

“Floats were intended to be used to take small pieces of content out of the flow and let the rest of the text wrap around them. They were not intended to be used for the main content of a page, nor were they designed for it. Nevertheless, use of floats for the main content of a page is quite common today.”

Overuse of floats considered harmful

Many web developers today are trying to do the right thing. They try to produce accessible, semantic, valid code and use CSS for presentation. They are also trying to survive in the real world, where there is always compromise between what is ideal and what is achievable.

To leave the main content of the page in normal flow may seem ideal, but it raises other issues for users and developers including lack of control of source order and clearing issues.

My main concern with this sort of article is that it does not offer any real alternatives for developers. To tell developers that they cannot use floats is very similar to taking away ammunition just before battle. There may be valid reasons for avoiding floats, but if there is no solution offered to take its place, where does this leave developers?

I guess I’ll have to start producing CSS layouts using harsh language.

Tags: ,

Date: 3 February 2006
Author: Russ Weakley
Category: CSS

Comments so far

  1. I personally prefer to use some masking tape and a bit of love.

  2. Ben Buchanan says:

    That was my reaction too… “sure, ok, so what do we use instead?”

    Although your way of saying it made me laugh out loud, so you win ;)

  3. Maxine says:

    Russ, if anyone knows how to use the tag, it’s you. A pioneer, as always.

    @Cam: glad wrap maybe, but masking tape? You could do yourself and injury….

  4. Nick Cowie says:

    And of course when you float a small piece of content, usually you also need to float the containing element. Because browsers will break layouts ( and different browsers break differently ) if the floated element falls outside the boundaries of a containing element. See for an example, and check in different browsers.

    David Baron argues that using floats makes it harder to write browsers. If the major browsers can not agree on how a floated element which overflows it container appears, why does it make writing a browser more difficult. They do not have to apply consistant rules.

    David’s second point “Makes it harder to improve Web standards”, different browsers rendering how a floated element which overflows it’s container appears makes it far harder to advance web standards than an overuse of floated elements to correct the problem.

    Finally “Reduces pressure for implementation of better technology” states “reduces pressure for standards organizations and browsers to develop such new solutions” no if browser manufactures interpreted the standards the same way the first time (remember the box model) life would be easier for browser manufacturers, standards organizations and the people who write the pages.

    Looks like I will be using a lot of harsh language

  5. Using floats for fancy positioning effects is an abuse, in the same way that using tables for layout is an abuse. While we’re all waiting around for CSS4 to provide real positioning tools, we need to abuse *something* in order to achieve those effects today.

    So I would put it to Mr. Barron: which is the lesser of two evils?

  6. Claire says:

    hehe we’re going to have put a “harsh language” filters on a lot of sites now!

    “It means Web browsers (and specification authors) need to get details the same when those details shouldn’t even matter.”

    “Authors’ dependence on very obscure details of how floats lay out means that those details can’t be improved later”

    The devil is always in the details, they always matter ;)

    Without the clever people who have been reading and following the progress of CSS standards and dissecting the details ~ “pushing the envelope”, such little details might have gone ignored and everyone might still be using tables and not CSS + Positioning and CSS wouldn’t be as widely accepted as it is.

    It’s been a hard slog getting developers to even accept CSS because of the positioning problems, does this kind of thinking suggest those of us who have upheld standards and supported the case FOR CSS in the last 10 years throw our hands up in the air and say we got it wrong, go back to abusing tables instead for positioning because the standards *might* have to be changed/improved and until then CSS really isn’t ready?

    I know which evil I’ll be sticking with for now :)

  7. meh says:

    Overuse of “considered harmful” phrase considered harmful.

  8. Tom says:

    So where does this put many of your Float Tutorials + Listamatic examples?
    I understand what is being said, but I just can’t see a real solution to this problem…..

  9. Russ says:

    Tom, the article suggested that floats were harmful but offered no solutions. However, you still have choices. For example:

    1. You could decide that floating large areas of content is wrong. This means that many multi-column layout options could not be used. You would still be able to lay out columns but you’re options would be limited.

    2. You could decide that, at this point in time, floating is one of the main tools at our disposal and that, while you know it is not ideal, it is better than being limited by the alternatives.

    The final choice is up to you :)