Positioning Problems

[crowden]

I'm trying to position some banners at the top and right of my page. I thought when you position something relative, it does so in accordance to its parent element. I have two divs at the bottom of my code that hold the banner images whos parent element is the pagewrapper DIV, yet relative positioning isn't moving these divs up, but rather leaving them at the bottom of the page. I tried absolute, but then the divs don't move with the rest of the page.

here's my page

XHTML Code:

<div id="pagewrapper">
  <!-- CONTENT WRAPPER -->
  <div id="contentwrapper">
    
    <!-- HEADER DIV -->
    <div id="header">
      <div id="headerContent">
        <h1>My Emergency Medical File(.com)</h1>
        <h2>Help save <span class="red">Your own life!</span> It's absolutely <span class="red">FREE!</span></h2>
        <h3>A service of Health Information Protection and Online Storage, LLC.</h3>
      </div>
    </div>
    <!-- END HEADER DIV -->
    
    <!-- CONTENT DIV -->
    <div id="content">
      
      <!-- LEFT SIDE CONTENT WRAPPER -->
      <div id="leftSide">
      <!-- MIDDLE CONTENT DIV -->
      <div id="middleContent">
        <div class="flash">
        <img src="images/flashbanner.jpg" title="Flash" alt="Flash" />
        </div>
        <div class="mainImg">
        <img src="images/home_pic.jpg" title="HIPAOS" alt="MEMC Collage" />
        </div>
        <div class="contentArea">
        <p class="mainText">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum bibendum velit ac neque. Curabitur congue facilisis erat. Aenean tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tinc idunt commodo felis. In non nisl. Nam orci. Pellen tesque urna nisl, venenatis eu, congue a, iaculis et, sem. Nulla eu lectus. </p><p class="mainText">Sed at risus. In ac ante. Ut id libero. Cras aliquam faucibus mauris. Pellentesque accumsan nisi sed tortor. Aliquam vestibulum condimentum dui. Pellentesque pharetra orci ut risus. Donec augue massa, iaculis id, ultrices non, ullamcorper ac, tellus. Aliquam euismod lectus id urna. Donec non sapien.</p></div><!-- contentArea -->
        <div id="sponsors">
          <div id="sponsorIcons">
          <img src="images/nhp.jpg" title="NHP Logo" alt="NHP Logo" />
          <img src="images/healthnet.jpg" title="Health Net Logo" alt="Health Net Logo" />
          <img src="images/bluecross.jpg" title="BlueCross/BlueShield Logo" alt="BlueCross/BlueShield Logo" />
          <img src="images/VQortho.jpg" title="VQorthoCARE Logo" alt="VQorthoCARELogo" />
          </div>
        </div>
      </div>
      <!-- END MIDDLE CONTENT DIV -->
      
      <!-- LEFT CONTENT(NAVIGATION) DIV -->
      <div id="leftContent">
        <div id="navigation">
        <ul class="mainNav">
          <li><a href="#" title="My Emergency Medical File Homepage">Home</a></li>
          <li><a href="#" title="About Us">About Us</a></li>
          <li><a href="#" title="The Benefits">Benefits</a></li>
          <li><a href="#" title="Your Privacy">Your Privacy</a></li>
          <li><a href="#" title="Frequently Asked Questions">FAQ</a></li>
          <li><a href="#" title="Contact Us">Contact</a></li>
        </ul>
        </div>
      </div>
      <!-- END LEFT CONTENT(NAVIGATION) DIV -->
      </div><!-- END LEFT SIDE CONTENT WRAPPER -->
      
      <!-- RIGHT SIDE CONTENT DIV -->
      <div id="rightSide">
        
        <!-- CTA ADVERTISE DIV -->
        <div class="cta ad">
        <h2>Advertise With Us</h2>
          <div class="cta_l"><!-- for BG image purposes -->
            <div class="cta_r">
            <p>Come advertise with us. Vestibulum nec enim. Donec a nisi. Duis sed sapien.</p>
            </div>
          </div>
        </div>
        <!-- END CTA ADVERTISE DIV -->
        
        <!-- CTA NEWSLETTER DIV -->
        <div class="cta">
        <h2>Newsletter</h2>
          <div class="cta_l"><!-- for BG image purposes -->
            <div class="cta_r">
            <p>Sign up for here!</p>
            <form id="newsSignup" name="Newsletter" method="post" action="">
            <dl>
	           <dt><label for="email">Email:</label></dt>
	             <dd><input class="form" type="text" name="email" id="email" /></dd>
            </dl>
            <div>
            <button class="formSubmit" type="submit" name="submit" value="Submit"></button>
            </div>
            </form>
            </div>
          </div>
        </div>
        <!-- END CTA NEWSLETTER DIV -->
        
        <!-- CTA LOGIN DIV -->
        <div class="login">
        <h2>Log In</h2>
          <div class="cta_l"><!-- for BG image purposes -->
            <div class="cta_r">
            <form id="login" name="Login" method="post" action="">
            <dl>
	           <dt><label for="username">Username:</label></dt>
	             <dd><input class="form" type="text" name="username" id="username" /></dd>
	           <dt><label for="passphrase">Password:</label></dt>
	             <dd><input class="form" type="text" name="passphrase" id="passphrase" /></dd>
            </dl>
            <div>
            <button class="formSubmit" type="submit" name="submit" value="Submit"></button>
            </div>
            </form>
            <span class="registerText">Not regsitered yet?</span>
            </div>
          </div>
        </div>
        <!-- END CTA LOGIN DIV -->
      </div>
      <!-- END RIGHT SIDE CONTENT DIV -->
      
    </div>
    <!-- END CONTENT DIV -->
    
    <!-- FOOTER DIV -->
    <div id="footer">
      <div id="footnav">
      <p class="footnavText"><a href="#" title="Home">Home</a> | <a href="#" title="About Us">About Us</a> | <a href="#" title="Benefits">Benefits</a> | <a href="#" title="Your Privacy">Your Privacy</a> | <a href="#" title="FAQ">FAQ</a> | <a href="#" title="Contact">Contact</a><br />
      <a href="#" title="Terms and Conditions">Terms and Conditions</a> | <a href="#" title="Sitemap">Sitemap</a>
      </p>
      <p class="footText">The Outer Limit Studios: Orlando Web Design and Marketing</p>
      </div>
    </div>
    <!-- END FOOTER DIV -->
  </div><!-- END CONTENT WRAPPER DIV -->
<div id="topbanner">
<img src="images/banner_top.jpg" width="469" height="61" alt="Top Ad Banner" />
</div><!-- TOP BANNER -->
<div id="sidebanner">
<img src="images/banner_right.jpg" width="121" height="409" alt="Side Ad Banner" />
</div><!-- SIDE BANNER -->
</div><!-- END PAGE WRAPPER DIV -->

CSS Code:

/* HIPAOS CSS Document */

* {
  margin: 0px;
  padding: 0px;
  }
html {
 /*width: 770px;*/
 margin: 0 auto;
 padding: 0px;
 }

body {
  width: 760px;
  margin: 0 auto;
  text-align: center; /*center hack*/
	background-color: #FFFFFF;
	font-family: Arial, "Trebuchet MS", "Arial Black", sans-serif;
	font-size: 1em;
	color: #000;
  }

#pagewrapper {
  width: 760px;
  margin: 5px auto 0px auto;
  padding: 0px;
  text-align: left;
  }
  
#contentwrapper {
  width: 630px;
  background-image: url(../images/round_top.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-top: 70px;
  padding-top: 6px;
  }
  
#header {
  width: 630px;
  height: 60px;
  margin: 0px;
  padding: 0px;
  background-image: url(../images/head_bg.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  }
  
#headerContent {
  width: 390px;
  height: 59px;
  margin: 0px;
  padding: 0px;
  background-image: url(../images/headerBG.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  text-align: center;
  border-right: 2px dashed #E81818;
  border-bottom: 2px dashed #E81818;
  }
  #headerContent h1 {
    font-size: 1.25em;
    /*font-weight: bolder;*/
    color: #E81818;
    word-spacing: -3px;
    margin: 0px;
    padding: 0px;
    }
  #headerContent h2 {
    font-size: .9em;
    /*font-weight: bolder;*/
    color: #000;
    margin-bottom: -3px;
    padding: 0px;
    } .red { font-size: 1.1em; color: #E81818; font-weight: bold;}
  #headerContent h3 {
    font-size: .7em;
    /*font-weight: bolder;*/
    color: #000;
    word-spacing: -1px;
    margin: 0px;
    padding: 0px;
    }

#content {
  width: 624px;
  border-right: 2px dashed #E81818;
  border-left: 2px dashed #E81818;
  margin-top: 5px;
  padding: 1px;
  overflow: hidden;
  }
#leftSide {
  width: 470px;
  margin: 0px;
  padding: 0px;
  float: left;
  overflow: hidden;
  }

/* MAIN CONENT AREA */
 
  #middleContent {
    width: 354px;
    margin-right: 5px;
    padding: 0px;
    float: right;
    }
  #sponsors {
    background-image: url(../images/sponsor_header.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    text-align: center;
    } #sponsorIcons { padding-top: 10px; }
.contentArea {
background-image: url(../images/hr_bg.jpg);
background-repeat: no-repeat;
width: 352px;
border: none;
margin-top: 5px;
padding-top: 5px;
font-size: .8em;
}   .contentArea p {
      margin-bottom: 8px;
      }
    
/* LEFT CONENT AREA (NAVIGATION) */ 
  #leftContent {
    width: 102px;
    margin: 0px;
    padding: 0px;
    float: left;
    }
    #navigation {
      width: 102px;
      border-right: 2px dashed #E81818;
      border-bottom: 2px dashed #E81818;
      margin: 0px;
      padding: 0px;
      }
      .mainNav li{
        width: 101px;
        height: 16px;
        margin: 0px;
        padding: 0px;
        font-size: .9em;
        font-weight: bold;
        list-style-type: none;
        }
        .mainNav li a {
          text-decoration: none;
          display: block;
          width: 101px;
          height: 16px;
          padding: 0px;
          margin-top: 3px;
          color: #000000;
          }
        .mainNav li a:hover {
          width: 101px;
          height: 16px;
          background-image: url(../images/navBG.jpg);
          background-position: 0 0;
          background-repeat: no-repeat;
          }
/* RIGHT SIDE CONTENT */    
#rightSide {
  width: 150px;
  margin: 0px;
  padding: 0px;
  float: right;
  }
  #rightSide h2 {
  margin-left:  24px;
    font-size: .8em;
    color: #FFFFFF;
    font-weight: bold;
    } #rightSide .login h2 { 
        margin-left: 27px;
        }
      #rightSide .ad h2 { 
        font-size: .75em;
        margin-bottom: 1px;
        }
  #rightSide p {
    font-size: .8em;
    }
  .cta { 
    background-image: url(../images/cta_header.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    /*width: 150px;*/
    } .cta_l {
        background-image: url(../images/window_bgtl.jpg);
        background-repeat: no-repeat;
        background-position: 0 0; 
        /*width: 150px;*/       
        }
        .cta_r {
        background-image: url(../images/window_bgbr.jpg);
        background-repeat: no-repeat;
        background-position: bottom right;
        padding: 5px;    
        /*width: 150px;*/
        }
  .login { 
    background-image: url(../images/login_header.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    /*width: 150px;*/
    } .login .registerText { font-size: .75em; padding-top: 10px; display: block; }

dl {
  font-size: .8em;
  }
  
.form { font-size: 9px; }
.formSubmit {
  padding:0px 0px 8px 0px;
  margin-top: 3px;
  margin-left: 45px;
  background-color:#FFF;
  background-image: url(../images/submitbutton.jpg);
  background-repeat: no-repeat;
  width: 74px;
	height: 7px;
	border: none;
	cursor: pointer; /* cursor: hand; for IE5 */

/* image is 74 by 7 pixels */
  }

/* FOOTER SECTION */   
#footer {
  clear: both;
  width: 630px;
  height: 49px;
  margin: 0px;
  padding: 0px;
  background-image: url(../images/foot_bg.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: .7em;
  font-weight: bold;
  text-align: center;
  }
 .footnavText {
  color: #E81818;
  line-height: 13px;
  } .footnavText a { text-decoration: none; color: #E81818;}
    .footnavText a:hover { text-decoration: underline; }

/* AD BANNERS */

#topbanner {
  width: 469px;
  height: 61px;
  position: relative;
  top: 5px;
  left: 0px;
  }
#sidebanner {
  width: 121px;
  height: 409px;
  position: relative;
  top: 70px;
  left: 640px;
  }

Any ideas/suggestions please? Thanks!

[Paul O'B]

Hi,

I'm afraid that you have mis-understood what position:relative does and it's not what you need in this situation.

Position:relative moves an element in relation to itself and nothing else. It moves the element from where it was in the flow and then offsets it the distance specified to somewhere else. The distance is the distance from where the element was and has nothing to do with its parent or containing block in any way.

The main reason that position:relative is not what you need is because it doesn't physically move anything at all. It only moves the element visually, but in fact the space that the element originally occupied is always preserved as though the element was still there. All other elements ignore the new position of the relative div and react as if it were in its original place. This is by design and can create some subtle and clever effects but it is not commonly used for structural layout.

Whay you need to do is create a stacking context on your parent div by applying position:relative without co-ordinates. As there are no co-ordinates then nothing has changed and all remains the same. However position:relative creates a local stacking context for nested positioned elements and becomes the parent for that element rather than the viewport.

This means the positioned element will maintain its position in respect to the parent element and if that element is centred then the positioned elements will remain at a constant dinstance in respect to the parent.

 #pagewrapper {
   width: 760px;
   margin: 5px auto 0px auto;
   padding: 0px;
   text-align: left;
  position:relative; 
 	}
   
 
 
 #topbanner {
   width: 469px;
   height: 61px;
   position: absolute;
   top: 5px;
   left: 0px;
   }
 #sidebanner {
   width: 121px;
   height: 409px;
   position: absolute;
   top: 70px;
   left: 640px;
   }

You may need to adjust the exact positions because I didn't know where you wanted them.

[crowden]

Wow,

I had to do some pagewrapper padding finagling to get it to display right in FF, but all is good now.

You've definitely cleared a lot of questions I had on when to use absolute and relative...separately or together.

thank you so much!