tags:

views:

46

answers:

2

in many website's source code i saw position:relative is added to every div which makes layout and no #wrapper div being used?

Is it good practice to add position:relative to every layout div? Is it related to IE 6 only?

this is css

 .header { position: relative; float: left; left: 143px; width: 977px; height: 150px; background-color: #ffff33; } 
.top-nav { position: relative; float: left; left: 143px; width: 977px; height: 30px; } 
.top-nav { margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } 
.top-nav li { float: left; } 
.top-nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px solid #ccc; } 
.top-nav li a:hover { color: #c00; background-color: #fff; } 
.wrapper { position: relative; float: left; left: 143px; width: 977px; background-color: ffffff; } 
.left { position: relative; float: left; left: 0px; width: 193px; background-color: ea0101; } 
.middle { position: relative; float: left; left: 10px; width: 551px; background-color: fff; } 
.right { position: relative; float: right; right: 0px; width: 213px; background-color: 356aa0; } 
.footer { position: relative; float: left; left: 143px; width: 977px; height: 100px; background-color: #c79810; }
+1  A: 

This is the main reason I can think of, which involves a bug in IE6/7. It involves elements incorrectly overflowing outside their containers when a parent element requires a scrollbar. The solution is to add position:relative to the parent element. Perhaps the owners of the websites you're looking at just took it to a crazy extreme?

http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

Matt Huggins
see i added example css code
metal-gear-solid
+1  A: 

Giving an element position: relative triggers the mysterious hasLayout property in IE 6 and 7.

Triggering hasLayout often fixes various CSS issues in IE, so some folks blindly apply it to every <div> in the hope that IE will behave as a result.

Real developers only use it when they need to.

Paul D. Waite
so using blindly can create any other conflict?
metal-gear-solid
Yup. Once an element is positioned relative, all its descendant elements can only be positioned relative to that element, rather than to the viewport. That usually won’t be a problem, but it could be.
Paul D. Waite