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 ?

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

Answer 1

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.

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.

Answer 3

Because the user can resize their browser window.

Answer 4

If you absolutely position two div's one after the other the problem will be thah they will always start at x and y coordinates from their parent relative container.

Once the content in the first div expands (for example when you load longer text that is very long), first div will expand and overlap or go under the second div since the second div will always stay at it's absolute position.

Answer 5

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.

Answer 6

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)

Answer 7

I found some good reasons here also

http://wac.osu.edu/webaim/dreamweaver.htm#h4