Floats Don’t Suck If You Use Them Right
Published 20 years, 5 months pastAndrei’s redesigning Design By Fire. I hesitate to comment on a partially-finished design, since I never know if the things that annoy or delight me are going to go away in the next revision. I will say that there seems to be an awful lot of whitespace in the masthead area. I’m more interested in responding to the concluding sentences of the section titled “Floats suck”:
All that CSS goodness however, does not mean that I think the logic behind float makes any real design sense, especially to someone who has an extensive graphic design background like myself. The whole float layout approach smacks of using a CSS property for more heavy duty work than it was intended.
That is precisely the case. float was never meant as a layout tool. I summarized the history of floats in the article “Containing Floats“, but the short version is that floats are not supposed to be a design tool. They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
Floats have been bent to the purpose of large-scale layout for exactly one reason:
clear.
Because you can clear a footer below two floated columns, float layout came into being. If there had ever been a way to “clear” elements below positioned elements, we’d never have bothered to use floats for layout. We’d have used floats in layouts, but that’s not the same thing.
Shaun Inman’s solution to this problem is to use JavaScript to “clear” positioned below others. For whatever reason, I tend to resist using scripting to solve layout problems, but in this case we really don’t have any other choice. I’m planning to employ his strategy when I adjust meyerweb’s design, since it’s possible to use it in such a way that things won’t be any worse if JavaScript is disabled, but much better if it is.
So to me, floats sort of suck for design purposes. They’re not bad, but not great. If you use them for their original (albeit limited) purpose, though, they rock.
Comments (24)
While floats are indeed being used far more extensively than what they are designed for, I like to point out that this has also had its benefits. If it weren’t for people menacingly trying to create new layout methods, often using floats, we wouldn’t have had the Piefecta 3-column layout, for instance.
Floats have served their purpose to a tenfold of the extent they were made for, and in that process, many CSS-fanatics have devised incredibly keen and interesting ways to use the power CSS creatively. If it hadn’t been for floats being both very flexible and limited, I think the way we use CSS in many designs these days would’ve been very different.
My $0.02 on the issue (that I decided to put here, rather than on Andrei’s page where the comments are focused on the site redesign itself, and not just on the floats-discussion, unlike here. Thanks Eric! ;))
Oh, terribly sorry to put this in a second comment, but:
Shaun Inman’s method of clearing absolute positioned elements is interesting, but has incredible problems when resizing text. I would be sad to see that problem appear on Meyerweb.com, providing of course nobody finds a way to have the javascript fix itself when resizing text :)
I really appreciate that you brought this up, Eric. Far too many people I run into think that floats are part of positioning. I have had to undo this belief so many times it’s almost becoming as bad as trying to correct people from saying alt tag, and everyone knows how insane that makes me :)
Floats may not be for positioning, but what else do we have?
Furthermore, they don’t suck once you learn the tricks and bugs (and there are a lot of them).
Of course, it would be nice to ahve some other way of doing column-based layouts, but in the meantime…
Floats may not be for positioning, but what else do we have?
Furthermore, they don’t suck once you learn the tricks and bugs (and there are a lot of them).
Of course, it would be nice to ahve some other way of doing column-based layouts, but in the meantime…
I agree with Mike. We don’t seem to have much of a choice. We’re preaching against tables for layouts, and if floats suck and are being abused… only positioning is left. We all know limitations of poitioning. Or I missing something?
When it comes to floats the multitude of corks in browsers is very annoying, but along the lines of what you said in your recent Dashboard posts we resort to what gets the job done. :)
Trackback ::
BBA Linkblog
Floats Don’t Suck If You Use Them Right
No, Positioning Sucks
The only thing left is CSS3 Columns <http://bugzilla.mozilla.org/attachment.cgi?id=153017&action=view> but sadly, only one browser which is still in alpha supports it, so it’s not a choice just yet. Does anyone know how to hack support into IE so that it supports the column commands? (Siimilar to how IE7 works)
Oops, I put <> around a link The link
Completely agree that using float for what it was intended for — like the preview thumbnails on the new DxF home page — really is great. However, to go the XHTML Strict route, designers need options to do the kind of complex layout I was going for on the redesign. Absolute positioning is not the right solution all of the time. Heck, not even most of the time. Without some reasonable solution to solve complex multi-column layouts, everything looks like a blog, and when designing a serious web app, or even slightly more complex web site than a publication or blog, designers need tools to do this. That was largely the gist of my complaint, even if I didn’t communicate it very well.
I completely agree with Mike Pick here, and furthermore, without the current popular applications of floats that people are employing, we wouldn’t be enjoying the CSS revolution (and web design evolution) that we are today. Things are evolving, from tables to CSS, and the ‘fittest tag for the job’ has been selected for (hello biology 101).
“Without some reasonable solution to solve complex multi-column layouts, everything looks like a blog”
A chance that I’m missing something here, but what is it that people are after? What are these applications/sites etc. that need ‘complex multi columns?’. Where are people supposed to be viewing these creations? Panoramic monitors?
It’s not that everything looks like a blog; it’s that a multi-column layout works for the data we are trying to present, for the medium that we are presenting it on. This is similar to displaying data in a table; it always looks like a table, because a table is the best way to present said data.
Would be nice to have something like display: table-cell. Oh, we do…
Mike P: in an application (a web app) there is more to the UI than reading content.
Something I have been dieing to have is some form of relative-absolute positioning. Meaning: the ability to attach some point of an element to some other point on another element. So for example, in a situation with two div’s with id’s “div-a” and “div-b”:
– attach top-left of div-b to bottom-left of div-a
– attach top-right of div-b to bottom-right of div-a
Perhaps even with the addition of being able to specify a distance from specified point (20px left of top-right of div-b), or percentages ((40% of width of div-a) below top-right of div-b).
The day we’re given this kind of flexibility would be a really fine day.
I completely agree with Mike Pick
Ah, I like that.
Seriously though, I feel like I can create a floating monster in my sleep at this point: to blow my own horn, check out the insane floating action of McKinsey Quarterly which has CSS that is so complicated that i am frankly embarrassed by it (though the design is not mine.) . (And it won’t validate either.)
Yes, we are misusing floats, but we can use them to create some serious layouts. HTML == hacking from day one. One day we may have a perfect set of layout tools for the web that completely separate content from presentation and give us the flexibility we need and want, but in the meantime, we just have to get on with it.
Part of the situation is that while float (suck) are not intended for positioning, they do the job. While there are a number of quirks to using them it is an acceptable compromise to dealing with the lack of a “clear” attribute for absolute or relative positions.
CSS3 columns aren’t really designed for doing sidebars/navigation links, but rather multi-column content layout (like in newspapers). That is, unless you want your content to appear in the same column as your navigation links …
If you want to do a sidebar (like the one on the right here) without specifying a fixed width with the new CSS3 properties, you should use the float and float-displace properties.
For a sidebar on the right as in this page, set float to right on the sidebar element, and float-displace to block on the content element. This way, the content will remain indented past the end of the float rather than wrapping back to the margin. This property should make it a lot easier to implement a number of layouts such that they scale properly with different font sizes.
Well… check out my multi-column on Deisng by Fire. That’s kind of thing is a basic layout technique — a three column layout where the third column is then split into two itself. Things like that are what I’m after.
Outside of my personal use of CSS for my pubishing content, Douglas is spot on when he says web applications need these sort of complex layout solutions for UI pieces, as web apps are not just about reading content.
I wonder if we will start to see a table like backlash against using floats for layout now?
I agree that floats are being abused like table are often abused. But then again, it’s matter of choice. Layouting a page is a must and you chose to do it either in CSS or in HTML. We’ll then the choice for me is easy. CSS it is. Using javascript to keep the code clean is option. But it may be tricky to keep a layout from cracking up when javascript is disabled of not present. I would suggest to resist the option to clean up HTML for a CSS hack (floats) by adding a javascript workaround. Clean HTML isn’t a holy grail you know. Just preferable.
As what Mike Pick said in comment # 4, once you learn the bugs and tricks they work.
Proving the point, for almost 10 years designers were using table tricks and bugs for layout purposes that weren’t originally meant for a table to be used that way.
The problem is, your site looks like bunk compared to, say, http://www.stopdesign.com, which employs floats extensively for layout. Kinda hard for me to believe that Bowman’s “wrong” when his finished product is light years ahead of yours. Also, floats are well-loved not just for “clear” (not even primarily), but mostly because they are able to stack horizontally (i.e. just about every topnav you see these days) so they can essentially be used as inline items even though you have all the block properties at your disposal.
Floats are great to build a site with, if you know your tips n tricks and understand the workings off each browser.
clear your divs if they’re nested in a containing div
always follow the notion “plan you’re route before you walk your path”
HAI! *bows*
Brade, for using blocks as inline items, CSS 2.1 has the inline-block display. Unfortunately, it is not supported well at all, not even in Mozilla. It would be very useful if it were.
~Grauw
It seems to me that the issue is this: graphic design, in almost any medium, needs to accomodate grid layouts. Those could be multi-column blog layouts, traditional top-nav/left-nav/body content layouts, stacked multi-column grids like newspapers, or portal UIs for web applications. Table tags allowed this, and float/clear does as well.
If CSS didn’t have a plan for letting designers build grid layouts, then it was flawed. Visual design without grids is like programming without variables. I think this is the root of Andrei–and others’–frustration with the eccentricity of float/clear. Fonts and color and letter-spacing are great, and necessary, but grids are the foundation for everything.
I’m not sure I see the answer in this post or in any comment: if not tables or float/clear, then what combination of HTML and CSS was intended to provide designers with the power to create grid layouts?