I've been working on a new design for my site that utilizes floats quite heavily. I thought it would be interesting to take a look at floats and the pros and cons of using them.

Largely because of the "clear:" CSS property, floats are made very useful in CSS layout. However, they also have some quirks. For instance, a non-floated element will not "contain" a floated element. And, even though floated elements are not actually in the "flow" of a document, they can cause some interesting issues with the document flow anyway.

What are some other issues with CSS floats? They're a very powerful tool in CSS Positioning, but certainly have some interesting "personality" aspects that make them rather challenging to work with sometimes!
Back to top

I've had a lot of problems achieving full layout stability with floats, and no longer use them for most primary layout elements. For me when you talk floats, you have to talk about the various browser implementations of them, since the results can be so widely affected, either small display glitches or full display explosions.

By abandoning them I've been able to achieve very stable layouts, upto 99% almost, enough so to be considered commercially viable. Opera is among modern browsers the main offender, primarily due to its over fast paint time, which I've begun to realize accounts for most of the rendering errors I experience in Opera 7. It basically just gets ahead of itself in its rush to be the 'fastest browser on earth'. To me, Firefox is plenty fast, and renders with more stability as a rule, though it does have its own bugs.

Personally if I hear another Opera fanatic say how it's the best browser in the world.... since I'm almost certain that not one of those Opera fanatics has run a extremely complex CSS layout, you couldn't have as an Opera fan until version 7 came out, and even that has CSS so buggy that at one point I was actually doing browser detection and correction for Opera 7.0 to 7.23, and I'm still finding display bug after display bug.

The only Firefox major display bug I see is the serious one where a margin occuring well below the top of a div, or group of divs, places the margin occuring below to the top of the primary container div, something very disconcerting when you first see it, it's corrected by placing either an explicit margin or controlling the margin of the offending item. I've seen no Firefox float bugs so far, though I'm sure no browser is immune.

Floats are also problematic because they tend to blow up in IE 5x mac, in hugely unpredicable ways. They also disrupt the document flow, especially when it comes to right floats, which can create truly bizarre information flow on the page.

I've started using more and more a mix of absolute and relative positioning, that works very well, and is very stable, except in those cases where I'm either just plain lazy, or where it achieves something that can be achieved no other way.

To get reliable layouts, I've found it helps with floats to make the layout very loose, leaving an extra .5 or 1% width for example as extra, if a float runs out of perceived room, it moves down to the next level, which can be disastrous, for example, a recent site I saw had the right column, floated, under the left column, the reason? a 1 or 2 pixel difference between Firefox browser skins, since we used different skins, the site designer never saw the error on his browser. This is the kind of layout instability I find to be the primary problem when it comes to using floats.

I usually only use floats for what they really were made for, creating box that is nested into the text around it, as with the older align methods with tables. That tends to work pretty well, with, again, the exception of Mac IE, which is a piece of bug ridden garbage, I have no idea how they sold anyone on the myth of their 'advanced' css support, it has many radically serious problems. I see MS once again putting out a buggy product that torments the web for the next 5 years, like with IE 6. Although I have to give MS credit, when they really try, they do really well, like with IE 4, 5, and 5.5

Plus of course the mac IE team probably weren't very high up on the totem pole at MS, in other words, the best were not assigned to that job, or they were, and didn't get enough resources, or whatever (after all, why again should MS be producing a fully topend browser for their main OS competitor?)
Back to top

CSS Floats seem buggy to me. I once tried to float one div left and another one right. I wanted both to take 50% width, but they either overlapped one another once I added content, or the top one in the code pushed the bottom one below it, even though they were supposed to appear side-by-side.
Back to top

Jarhead, welcome to techpatterns forums, feel free to ask anything you want to know and we'll try to give you a hand.



Where the problems are rooted
One of the bigger understatements, many CSS layout problems are directly caused by an over reliance on floats, which are, as you said perfectly, buggy, to put it mildly. The real problem originated in very loose w3c float specifications, they were and are so loose that each browser maker had a lot of room to interpret the specs, and used that room.

Plus if you think about it, floats are massively complex in terms of what you are making a browser do, it has to rearrange the whole webpage to properly display the floated item, since not only does a float pull the page data out of the document flow, it also requires that the page data align itself to this object which is not in the flow. This is very hard to program in, just because the w3c writes a standard doesn't mean it's easy or even possible to implement well.

Each browser has its own rendering engine, and when you try to implement new standards, a lot of times the methods will trigger previous bugs or methods in the core rendering engine, not easy to fix except to rewrite the whole rendering engine, which is a lot of work, millions of lines of code.

An easy fix to browser CSS float problems
A lot of times this is just a browser math problem, when you have widths declared as 50%, the browser has to decide whether to round up or down to the nearest pixel, and sometimes if it rounds up you suddenly have a width of 50% + 1px, which means there is no longer room for the two floats to sit side by side, since their total widths are 50% + 50% + 1 or 2 pixels.

The easiest solution is to set one width at about 49.6-8%, that allows for this math problem, since then the width is 50% + 49.6% + 1 or 2 pixels, which almost always works fine.

Another possible fix to float problems using single floated item
Even better is only positioning the left bar with float, and have the right bar be positioned relative, with a margin that is a tiny bit larger than the float bar width, that usually works fine, not if you need a border between the two, but there are other solutions to that, they get increasingly complex as the page grows complex of course, and then of course you'll get a report of IE mac failures down the road, haven't made a site in a while that has worked bug free in IE mac.

good luck on your CSS projects, it's all about practice and learning browser specific issues, not so much about the pure standards unfortunately, or maybe fortunately, since if it was too easy, nobody would have to pay you : ) to do the work, ha ha....
Back to top

Welcome jarhead!

What you're describing sounds pretty similar to some problems I had when I first started out in CSS Positioning. What I didn't realize at the time is that floated elements should always have widths assigned to them.

Actually that's one of the "quriks" of CSS floats that I mentioned in my first post in this thread. Actually it's not actually a quirk; just something to remember. And it's not just floated elements that need to have widths assigned to them either; any page element that's taken out of the document flow needs to have a width assigned.

Something else to remember when using CSS floats is to assign them display:inline in your stylesheet. This helps eliminate such bugs as the "IE 3-pixel Float Bug."
Back to top

Thanks guys, I hadn't understood some of those things. Particularly about the widths on floats. I hadn't assigned any widths to mine which it sounds like that might have been the problem. So what else is taken out of the document flow and needs a width assigned to it?
Back to top

Hi Jarhead. Absolutely positioned elements also need to have a width assigned to them.

In Mozilla, for example, if you position an element absolutely, and want to stretch full screen, which is the default behavior of most block level elements like div, h1, p etc, you need to give it that width explicitly or it will only get wide enough to handle the content, that's confusing the first time you see it.

Absolutely positioned elements are also not in the document flow, which can be a very useful matter when it comes to site construction.
Back to top