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

by

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.

More Related Contents:

  1. Margin on child element moves parent element
  2. Make a div into a link
  3. How do I center align horizontal menu?
  4. Should I avoid using !important in CSS?
  5. IE 8: background-size fix [duplicate]
  6. CSS: Hover one element, effect for multiple elements?
  7. xHTML/CSS: How to make inner div get 100% width minus another div width
  8. Cols, colgroups and css “:hover” pseudoclass
  9. CSS Justify text, fill space with dots [duplicate]
  10. Can we use any other TAG inside along with ? [duplicate]
  11. Replacing H1 text with a logo image: best method for SEO and accessibility?
  12. For div to extend full height
  13. html5 vertical spacing issue with
  14. CSS Parent/Ancestor Selector [duplicate]
  15. Select inputs and text inputs in HTML – Best way to make equal width?
  16. Vertical and horizontal align (middle and center) with CSS [duplicate]
  17. Why and not taking font-family and font-size from body?
  18. how to set background image in submit button?
  19. The difference between percentage and fr units
  20. Is it possible to include one CSS file in another?
  21. How to display list items as columns?
  22. Should I use ‘border: none’ or ‘border: 0’?
  23. How to make round corners to both inside of a box and its border?
  24. How does one target IE7 and IE8 with valid CSS?
  25. How to Include CSS style when converting svg to png
  26. Make floating child visible outside an overflow:hidden parent
  27. How do I select an element only when inside another element?
  28. Using Font Awesome icon for bullet points, with a single list item element
  29. How to style the number on a html list?
  30. Creating a droplet like border effect in css

Leave a Comment