Menu
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.
314
Usually you would only absolutely position something if you can't use any other positioning method to get make the layout work. An example would be positioning icons or elements inside a container.
When you need something to be positioned in an very specific spot you would use absolute positioning. For instance you may want to have an image with an overlapping caption that always sits at the top of the picture (say 20px from the top).
Fixed. The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
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.
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.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
