Why shouldn't I use position:absolute for positioning everything?

Question

This question is asked by one of my students and I want to enlighten him with an example:

"Why we should not create site layout by Dreamweaver's AP Div button , it's easier to make layout with AP Div instead Float+margin+padding and if this method is not correct then why it's not good method and why Adobe giving this button in Dreamweaver to make layout even if it's not correct way to make layout?"

Can anyone explain, with an example simple and concise, why position:absolute should not be used for positioning everything?

• Should we ever use it to position layout elements (#wrapper, #header, #footer, #mainContent, #sidebar etc.)?

• What problem we can have if we make a layout with position:absolute using Dreamweaver AP div button a toolbar button image http://livedocs.adobe.com/en_US/Dreamweaver/9.0/images/draw_layer_button.gif?

I know position:absolute is not good but I am unable to explain nicely or provide any examples.

Courson

Answer 1

Relative Divs

---

Pros-First they allow for your site to handle a change in content. IF you were to use all absolute div tags you could easily have your tags overlap and hide each other when the data within them changed. Secondly, many good sites allow for the information to wrap depending on the screen resolution and browser size that a user uses to access the web page.

---

Cons-Slight changes in the size of your relative divs can cause your tags to change how they wrap. Also, change in information can sometimes cause frustrating changes in your overall site look, which in turn requires some tweaking.

Absolute Divs

---

Pros-First they solve the issue of having a small amount of content scattered across a larger area. This is usually the case with header data or heavily graphical sites. Sometimes you will have a large area with a background image and you will have few controls along the edges and in the middle that need to be placed exactly. Relative divs would be a headache in this case as you would need multiple extra divs and they would easily break when a user resized their browser or access the site from a small resolution screen. The other major use for Absolute divs is pushing content out of the area it was originally in. A great example of this is menus! The header of a menu is usually contained within one div but the items within it fall into another div when the menu header is hovered over. Also, tooltips and things that popup on the screen usually require absolute positioning.

---

Cons-Absolute divs run into a similar issue as Relative ones if they are used incorrectly. The issue is they become tedious to manage. Specifically, if you used 10 absolute divs to control your content areas and one of those areas became larger or smaller because your content changed you could have to modify the location of every single div. Which would take a great deal of time.

---

In Conclusion - Many times you will want to use a site with Absolute and Relative div sections not only because they both serve a purpose but because when using them together you can create the best looking web pages with the least amount of time and code.

Innards

+1 For mentioning changes to content. It would be a maintenance nightmare to have to alter 100 element positions every time you add or edit a section of text. Also, web pages are commonly aggregations of content from different sources or groups; you don't always know the size of every bit of content at design time -- in fact I'd say you don't more often than not, in the world outside the classroom. – Obsessive

Answer 2

Well, for one thing you don't know the display size for every device that could access your site. Most will probably have full-size displays (800 x 600 or likely larger), but some will be wide aspect (e.g. 1440 x 900) and some could be mobile devices.

Allowing each device to layout the elements of your page(s) based on rules -- e.g. Float, margin, padding -- means that each device can optimize the content for its own display.

Obsessive

Answer 3

OK, so let's say you absolutely position everything. What happens when #mainContent has one paragraph on one page, and two paragraphs on the second page. Where do you place #footer pixel-wise? What happens if the user increases their font size?

Dreamweaver provides the button because absolute positioning is sometimes useful. That doesn't make it always useful.

Sihon

you mean if content is fixed and never going to be changed then no problem with absolute positioning. if content can be removed or added then only absolute positioning will create problem – Courson

Well, even fixed content can take up different amounts of space on different computers. Macs and PCs handle text display ever-so-slightly differently, a person with poor vision may have the font size set higher, etc. – Sihon

Answer 4

Because the user can resize their browser window.

Sansbury

Answer 5

OMG amazing timing! Today there was a nice article on hacker news: http://www.barelyfitz.com/screencast/html-training/css/positioning/

This basically shows you the different types of positionings: relative, absolute, float, etc. as well as why to use them. Don't forget position: fixed is good for something like a legend always appearing on the page.

I know position:absolute is not good but I am unable to explain nicely or provide any examples.

Its not that it is not good. It is. It is just that it is not the right solution to all problems. Just like a hammer is not a good solution to screwing in a light-bulb, but that does not indicate the hammer as a bad tool. (hopefully the analogy helps)

Vomitory

This link is nice. Thanks for sharing. Very well understood now – Berton