View Full Version : Floats aren't always the answer

10-24-2007, 09:14 PM
In my short time perusing this forum and seeing the various problems people run into with layouts it's apparent that a lot of people have come to depend on floats for almost all CSS layout. This dependancy has forced many people to deal with the prevalent IE bugs with floated elements, the confusion of normal flow and collapsing margins, and the guesswork that comes with making floated elements stay where they're supposed to (and not drop below other elements). I thought I'd take a second today to write about the black sheep of CSS layouts, and often the best approach for the job: positioned elements.

Shortly after CSS became vogue people started to scoff at absolute and relative positioning. Flexible layouts were becoming more popular (again), and the thought of placing elements on the page with pixel precision seemed easily-breakable and naive. The "float" CSS property emerged as the positioning tool of choice, and since then people have pretty much accepted its use as axiom.

There are problems with floats though. Browser bugs aside (including peekaboo, double-margins, 3px jog, and the like), floats' behavior is easily influenced through browser viewport. If the viewport shrinks too low to fit the floated elements they drop below a sibling element and all of the sudden the layout is busted. The fix to this is to take advantage of min/max width attributes but wait!! those aren't well-supported either. So now to have your simple layout you have IE hacks impose a proper min width in a flexible layout, pretty much the entire page floated because of the problems with shrink-wrapping floats requiring floated parents, and all you wanted was that item to be beside that other item.

Enter positioned elements (fixed, relative, absolute, and static). There are so many advantages to using absolute- and relatively-positioned block elements that I could fill up a book. Namely you get the opportunity to completely separate the content from the presentation, even to the point of not caring where the divs occur in the markup.

Take for example a prototype of my new portfolio site:


Notice that the navigation for the page is at the bottom of the content, but when you look at the source file you'll see it actually comes right below the page heading. In this way, you can make your page more accessible to users with screen-readers by giving them the navigation upfront, even if you prefer it visually at the bottom. (Also worth noting that prototype uses transparent PNGs and I haven't written code to handle IE6's mishandling of them, but it still illustrates my point well).

Like floats, absolute poisition takes the element out of normal flow, but its positioning is offset from its closest parent relatively-positioned element (defaulting to the viewport if it finds none). This is a very powerful tool, where if you want something positioned specifically inside of a content area, you can simply make its container relative and absolutely position the element in relation to the container.

In contrast, relatively-positioned elements technically still live in normal flow--leaving a ghost of their old position behind. This can be a very powerful layout tool where you want to offset something visually on the page, but you don't want the old content spilling into the space it used to occupy.

I think floats have appropriate use in CSS layouts, but a lot of the headaches people struggle with would be (relatively) solved if they approached things through positioned elements instead. IE has its share of positioned element bugs similar to floats, but next time you go to flesh out a page--especially one where you have an idea of the general dimensions of columns--consider positioned elements instead. They really do have a bad rap for as powerful a tool they are, but until the advanced positioning CSS3 module gets widespread adoption in a lot of cases it's the best/simplest solution.

10-24-2007, 10:03 PM
Good thoughts, Justin. I agree that direct positioning has its place in website development just as floats and I agree that positioning isnít all that bad and is very powerful and useful. However, your statement also shows one issue many, many of the people coming here seeking for help get wrong because they are using that powerful method without being able to control its power:

Namely you get the opportunity to completely separate the content from the presentation, even to the point of not caring where the divs occur in the markup.

Exactly. And exactly thatís the problem. Positioning certainly is useful and it wasnít invented for the fun of it but among most of the people coming here asking for help in positioning something on their website the problem was/is that they just put a lot of divs without any plan or concept in their document and thought they could solve everything with positioning. But just because you can doesnít mean you have to.

There is a reason why in most tutorials found in todayís internet CSS based layouts use floats to get columns etc. Sure, there are also layouts where you donít get around positioning. However, the technique of using direct positioning is kind of advanced CSS compared to using floats. Just think about these subtle effects with positioned ancestor elements etc that many CSS newbies donít know and/or get wrong. Positioning is very intriguing because it looks very obvious and natural on first sight but it has its drawbacks as well. Specifically layouts tend to be much more static in nature than if you let the code flow naturally and use floats for the overall layout.

Your nicely designed portfolio is really good for some kind of advertising: Itís simple and you can make your point clear to the average guy with a few words. But it doesnít show how difficult things can get with advanced layouts where floats keep it much more natural.

I certainly encourage the use of direct positioning but only if itís used wisely and if it would be more laborious to avoid it. Floats are good for the general layout (e.g. to get two or three columns). You still can use positioning for smaller sections where it doesnít screw up the entire page if something is wrong.

I just wanna clear up the misconception that direct positioning is all that easy. Also, any CSS is only styling the HTML and if the HTML is poorly written (i.e. not semantic (http://brainstormsandraves.com/articles/semantics/structure/)) then the best and most advanced CSS canít correct it.

10-24-2007, 10:49 PM
Yup those are all good points of clarification. There should certainly be a caveat that if you're just learning things like floats will definitely serve you better in understanding normal flow and basic layouts.

I mainly wanted to post this because it's something I've had to overcome personally. I remember after I became quite versed in CSS people would have me debug their code, and the second I saw any "position: absolute;" I automatically assumed what you just mentioned--"either they used a WYSIWYG or they have no clue what they're doing, that should be floated." It was almost like I was hard-wired for thinking that way.

Anymore though, there are several applications where floats just lead to ugly tag soup and way too much cross-browser debugging--when all they really needed to do was position the elements where they wanted.

I'm really just holding out for a true separation of content and presentation. Even with CSS in our toolbelts most of us start a blank page with thinking "ok well this needs to be centered so I'll add a wrapper div, and the nav is floated left so I'll put it first" etc. etc. Also because floated layouts depend on other objects being there to scoot them into position, you can easily completely break the page if you just need to remove one section. With the advanced layout module in CSS3, the column module, and other advances we're probably still years away from seeing you'll be able to truly approach a document from the content up--making lean semantic markup without the constraints of considering how it'll be presented.

And until then, positioning can really get you close to that if you use it wisely. Again, good words of warning to those who would read and rush off to make their whole website absolutely-positioned--but I think us seasoned designers should break out of our float straightjackets every now and then and give positioned elements another chance.

10-25-2007, 01:57 AM
I totally agree. Several times I've read in this forum where a newcomer says "I'm having trouble positioning so-and-so" and someone else will jump in with, "Your problem is you're using absolute positioning. You shouldn't use that, you should use floats." That's such a closed-minded and stubborn reaction, especially considering floating containers for positioning is just as much of a "hack" as using tables for layout (although with obviously less detrimental results).

I am all about using whatever gets the job done. If it's absolute positioning then so be it. For what it's worth I usually look for a positioning solution before a floating solution as it has more predictable behavior, IMO.

10-25-2007, 04:30 AM
I totally agree. Several times I've read in this forum where a newcomer says "I'm having trouble positioning so-and-so" and someone else will jump in with, "Your problem is you're using absolute positioning. You shouldn't use that, you should use floats."

Mostly the people who have used absolute positioning in that situation have coded it in such a way that it only works at one browser window size and breaks as soon as the window is even slightly different in size. Their design is also usually one that can be produced most easily using floats.

Obviously positioning has its place in page layout especially where you want elements to be able to overlap when necessary. The biggest mistake that most newbies make is positioning everything absolute within the viewport rather than setting out the bbasic page structure using position:relative (and perhhaps some floats) and using position:absolute within the relatively positioned parts of the page so that the page components will move appropriately as the page is resized. The only real use for position:absolute outside of position:relative is for objects that will be moved independently of the rest of the page via JavaScript.

Learning how all of the CSS commands work and using the most appropriate one for what you are trying to do will result in much cleaner easier to maintain code than if you avoid using one or more of the commands because it is considered to be wrong (if it were wrong then why did they create it in the first place?). The reason people get into a mess using positioning is that coding a page correctly using positioning is a much harder task than coding a page using floats. In most cases people are best off to learn how to use floats properly first before they start to look at what can be done with positioning. That way they will be able to make proper decisions as to when to use positioning and how to apply the positioning so thhat it will work correctly regardless of browser viewport size.

10-25-2007, 05:10 AM
My thoughts on floats versus positioning are summed up pretty well in an article Shaun Inman wrote awhile back:

Absolute positioning is by far the most reliable way to position something with CSS. Take the elements that require positioning and wrap them in a containing element. Set that containing elementís position to relative. Then set the original elementsí positions to absolute and specify top and left coordinates. These positioned elements can be crammed full of gigantic images and italic text or have their text resized until the x-height matches the window height and they still wonít wrapóunlike our fair-weather friend, the float.


10-25-2007, 09:11 PM
The biggest problem most newbies have is that they don't wrap their position:absolute elements inside of position:relative elements.

10-25-2007, 09:47 PM
The biggest problem most newbies have is that they don't wrap their position:absolute elements inside of position:relative elements.

Yup, and the biggest problem with seasoned CSS designers is their first impulse for positioning an element outside of normal flow is always a float--which is really all I'm getting at. :P

10-26-2007, 05:56 AM
Wow a light bulb has just been turned on,
great topic guys, thanks all.

10-28-2007, 11:38 AM
@vtjustinb : First of all thanks for opening a thread like this
The portfolio link looks good, but I think there must be at least one float for a fluid layout having 2 or more columns to hold its nav-bar and other contents

10-31-2007, 09:03 PM
The biggest problem most newbies have is that they don't wrap their position:absolute elements inside of position:relative elements.

It could be said the biggest problem most newbies have is they don't clear their floats.

I don't think the problems a "newbie" should dictate best or available practices. If that was the case we'd outlaw <div> elements because most newbies use them with no regard to semantics. Or dissolve the forums because most newbies don't read the Rules and Posting Guidelines. :p

10-31-2007, 10:01 PM
@vtjustinb : First of all thanks for opening a thread like this
The portfolio link looks good, but I think there must be at least one float for a fluid layout having 2 or more columns to hold its nav-bar and other contents

I actually would disagree with you on that point.

Really the single biggest drawback of using position for layouts is they that can't be cleared. In some designs that might be a problem (such as if you want a footer below both columns), and in others it might not. Obviously you can easily fix that with scripting, but that's kind of against the whole "strive for simpler" approach the original post was charged with (Shaun Inman in particular has provided a lot of insight on clearing positioned elements through Javascript).

But it's totally possible to have a conventional two-column layout without needing floats:

<div id="masthead">
<div id="nav">...</div>

<div id="content">
<div id="main">
<div id="footer">...</div>
<div id="side">...</div>

#content { position: relative; }
#main {
position: absolute;
width: 67%;
top: 0;
left: 0;
#side {
position: absolute;
width: 33%;
top: 0;
right: 0;

So in that case you'd have a simple two-column layout were source order didn't matter (not that it would with floats either in a two-column setup) and you don't have to wrestle with the browser dropping one float below another by messing with misrepresented percentages (ie's 49.5% rule) or margins.

I think what floats excel best at is floated content. For example, when you have a horizontal navigation bar and they are not uniform size then a float is the perfect solution. I just think that they're a little overused in situations where you know a lot about what you're dealing with (height/width/positioning) and it might be simpler/less-debugging to just position them.

Again there are limitations to positioned layout. Namely the clearing issue I noted, as well as gutter declarations in fluid layouts (if you want an exact 10px gutter in a % fluid layout it's tough to achieve with positioned elements). I'm just here proposing alternatives that people probably skip over b/c we've been conditioned to for so many years.

11-01-2007, 01:01 AM
I also had a pretty challenging layout/site (http://www.touch-stone.de/de/produkte/travertin/) to develop lately (development in progress yet) where I had the choice between float and position and in this case I chose the positioning because it really would be the most practical solution here. There are three columns and since the two columns on the left side are pretty much alone there (i.e. no content to come below them) they could be positioned absolutely, and the main content (positioned relative to hold other absolutely positioned content) just needs some margin.

In this case floats would be semantically incorrect if there was semantic CSS.

02-09-2008, 10:34 AM
Please make this thread a sticky one... 60&#37; of posts, posted in now a days in HTML-CSS forum are related to floats. (Most of them used it incorrectly without any purpose)

02-09-2008, 11:33 AM
I still have many problems with floats. My usual method ( due to a lack of understanding of what floating involves) is trial and error, or as I usually call it "Suck it and see."

If I set out without a template to design a site, I really do it as a blind man, and all the many books that I own do not seem to help very much.

I have been a technician since I left college in 1939, except for the war years, but I have been used to dealing with properties that are well defined. I find the floats do not, at least to me, fall into that category. I am still looking for a really clear explanation to overcome my blind spot.

This thread is the sort of discussion that I find helpful, but I still do not understand floats. The idea of position absolute etc seems quite attractive to me.


Sorry for the diversion.