Absolutely positioning everything on a website?

Question

I had a discussion with someone about absolute positioning. He claims that the best practice to secure that everything looks all the same across most browsers and that it's the easiest way to maintain the looks and feel that you intended for a website.

I disagreed with his opinion, that absolute positioning would be the remedy and an overall best approach to laying out a webpage.

In my case, I've been more keen on using the approach of margin/width/careful floating adjustments, and sometimes the occasional table. Which is a slight generalization, as of course, I wouldn't stop using absolute positioning just because I'd be ideologically against it, it's just that I find the approach absolute-position one rule fits all-approach as advocated by my peer to be rather doubtful.

What's the general consensus about this?

Answer 1

My general view is the ends justifies the means.

Pragmatism reigns supreme here. The ultimate goal is to get it to work as quickly as possible on the widest range of browsers as possible. Whether or not to use absolute positioning, whether or not to use tables, whether or not to use pure CSS... all of these questions are, at best, secondary.

I actually find it bizarre how much "table hatred" there is out there but, as has been documented countless times, if you want to do some things (like vertical centering) and have it compatible back to IE6 there's no quicker, easier and more compatible solution.

I'm not for or against tables, absolute positioning or anything. The only thing I'm "for" is that it works.

So in that vein, i find argument about "radical" absolute positioning to be--for lack of a a better description--irrelevant distractions.

With all of these things (tables, absolute positioning, pure CSS, etc) in most cases you're not solving all your problems, you're simply trading one set of problems for another. That might be OK because in the context of what you're doing one set of problems might be preferable but there is no magic bullet (be it absolute positioning or anything else).

From experience I've had just as many problems getting absolute positioning to do what I want (cross-browser) as any other approach.

Answer 2

Use absolute positioning only when you are 100% sure that the involved elements will never have to scale their size and won't be moved around. If you have absolutely positioned some element and then another one grows they can overlap and your layout is broken. I would use absolute positioning very carefully and generally advice against it. The same layout can almost always be achieved by using floating elements and/or relative positioning.

Answer 3

Guaranteeing that everything looks the same across all browsers is a difficult goal, primarily because you're always aiming for a moving target.

Websites are a delivery mechanism for content that is mostly textual in nature. If your content relies on pixel-perfect positioning, such as animated graphics and the like, HTML and Javascript may not be the best solution for you. Should it really matter if your paragraphs are one pixel lower on the page in Firefox than in IE?

Answer 4

Whilst it can be quite subjective, I'm not a fan of absolute positioning, as you should check through with CSS disabled to see how the content degrades for non-CSS aware browsers (such as search engines, console based text browsers and HTML->Speech browsers for the blind).

The other main advantage by not positioning absolutely, is that you can have more generalised CSS, shared across an entire site, without having to litter positioning statements all over code -- it'd be horrible if the client suddenly makes their logo have a different aspect ratio and need to move everything around...

Answer 5

The internet isn't print, I don't think it's ideal to absolutely position everything. I'd argue you can make sure things look better by using your method, perhaps augmented by using EMs for some widths to allow the page to be a bit more fluid on different screen sizes (and DPIs). This allows your content to scale better, and with mobile browsing becoming more popular that's important.

In my experience pages tend to look better overall when you plan for your page to have to adapt a bit to different devices, as opposed to trying to force 100% pixel-perfect layouts like you'd see in print. That's just not the nature of the internet.

Edit: Thinking about it more, using all absolutes might really come back to bite you with mobile browsers if you're not careful. What happens when your site uses absolute positioning on something like the iPhone (assuming you're aligning some elements to corners)? The positioning would be aligned to the iPhone's corners, which are an odd ratio (compared to computers) and much smaller resolution; throwing everything out of wack. If you used a combination of floats/widths/etc you'd make sure the site kept its original size and you'd just have to scroll.

Answer 6

Absolute positioning is generally pretty bad. Rarely do you want your website to look the same windowed on someone's 1024x768 laptop and fullscreen on their 1920x1200 desktop. Also, good luck reconciling your absolute positioning with different user font sizes.

Remind your peer that users would rather see the look and feel they intend for a website, not the look and feel he intends (within reason.)

Answer 7

cletus has a point. As developers, the question is ultimately - how thorough do we want to be? If getting your site out fast is the most important, then extra precautions may be sacrificed. If making a site "bullet proof" is a priority, then doing so will take a lot of time and effort. I personally would never sacrifice extensibility and or usability in the name of convenience. Scaling among other things disqualifies absolute positioning for layout every time in my book.

Answer 8

I'm no fan at all of absolute positioning but I have seen web developers use it to get better search result, because they can easily put the most important text part at the start of the HTML, and use absolute positioning to position it where it actually belongs.

I would not use it even for that argument, because there are ways to get the HTML to be search engine friendly but still use a fluid layout such as the The Perfect 3 Column Liquid Layout or other variants.

Answer 9

He claims that the best practice to secure that everything looks all the same across most browsers

You can't secure that everything looks all the same across most browsers. Fonts are always rendered differently depending on platform, settings and availability. If you use full-on absolute positioning — as in, each element has its horizontal and vertical position set in pixels — then any deviation on font-size can result in the lines of text being written on top of each other, making the page unreadable.

There are WYSIWYG design tools that do this (and some people abuse Dreamweaver that way), but it's generally considered an amusingly poor approach. More commonly, absolute positioning is used in only the horizontal axis, to make fixed-width headers and footers whilst allowing the text in the page to take up as much vertical space as needed. (This is what SO does, for example, amongst many others.)

The fixed-vs-liquid layout argument on browser width is a religious war that will rage forever, but the obviously correct summary is that liquid is best. ;-)

(...if harder to pull off, natch.)

it's the easiest way to maintain the looks and feel that you intended for a website.

Yes! A bad way of solving a problem is quite often the easiest. But “best practice”? Hardly.

Answer 10

Use absolute positioning only when you are 100% sure that the involved elements will never have to scale their size and won't be moved around. If you have absolutely positioned some element and then another one grows they can overlap and your layout is broken.

This is right. I just earned 500 bucks fixing a site for some guy, and teaching him that his absolute-positioned website broke the moment he added so much as a comma, because the text would re-flow and the whole thing fall apart.

Answer 11

Using absolute positioning will always bite you later on. A site should be in normal flow as much as possible, so that elements can sit in relation to each other (grow/shrink, collapse when hidden, etc).

With an absolutely positioned layout, you will always be required to tweak the layout whenever content changes.

I only ever really use absolute positioning for three reasons:

1) I'm placing an element on top of other element, like a pop-up box.

2) There's really no good way to place an element where it needs to be in normal flow

4) The element will be manipulated dynamically (javascript) and that needs to happen outside of normal flow.

The other rule I tend to abide by when using absolute positioning is use a another element as a relatively positioned parent. That way, the absolutely positioned element will sit relative to that parent, rather than the viewport (which will often change its dimensions depending on how the page is viewed).