Well, I have come a long way since I first started learning CSS (thanks to your help and the tutorials you have posted here!). I have somewhat figured out how to use float instead of absolute positioning. and I have removed a ton of unnecessary styles and div tags, and am allowing simple html to layout my page.

My problem now lies in stacking images...

My page has a series of thumbnail images that when rolled over I need to show hidden larger images, that appear next to them. So basically my large image is on the right, thumbs on the left.

Using floats does not work, the only way I have gotten them to stack is by using absolute positioning. The problem is, they are not staying where they should.

This problem lies in that my "container" div is set to margin: auto so it centers in the window. The absolute divs are placing from the right of the screen, not the container. So how can I get them stay in the same place, inside the container??

I hope this makes sense...

Here are the relevant css styles:

p.thumbs{
    color: #000000;
    text-align: justify;
    padding-left: 25px;
    padding-right: 65px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
li.bullets{
    list-style: none;
    background: url(images/bullet.gif) no-repeat left top; 
    margin: 0px 15px 5px 25px;
}    
#thumbs {
    float: right;
    margin: 11px 15px 10px 15px;
    width: 57px;
    height: 353px;
}
#content {
    background: #FFFFFF;
    height: 374px;
    width: 924px;
}
#image1 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 51px;
    top: 181px;
}
#image2 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 51px;
    top: 181px;
}
#image3 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 51px;
    top: 181px;
}
#image4 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 51px;
    top: 181px;
}
#image5 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 51px;
    top: 181px;
}

and the html:

<div id="content">
<div id="image2"><img src="../images/whois-mobile.jpg" width="355" height="374" /></div>
<div id="image3"><img src="../images/whois-rotary.jpg" width="355" height="374" /></div>
<div id="image5"><img src="../images/whois-quickspace.jpg" width="355" height="374" /></div>
<div id="image4"><img src="../images/whois-modmillwork.jpg" width="355" height="374" /></div>
<div id="image1"><img src="../images/whois-corphq.jpg" width="355" height="374" /></div>
<div id="thumbs">
    <img src="../images/whois-corphq-t.jpg" alt="Corporate Headquarters thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','hide','image5','','hide','image4','','hide','image1','','show')" /><br />
    <br />
    <img src="../images/whois-mobile-t.jpg" alt="Mobile System Thumb" width="57" height="60" onmouseover="MM_showHideLayers('image2','','show','image3','','hide','image5','','hide','image4','','hide','image1','','hide')" /><br />
    <br />
    <img src="../images/whois-rotary-t.jpg" alt="Rotary Thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','show','image5','','hide','image4','','hide','image1','','hide')" /><br />
    <br />
    <img src="../images/whois-modmillwork-t.jpg" alt="Modular Millwork Thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','hide','image5','','hide','image4','','show','image1','','hide')" /><br />
    <br />
    <img src="../images/whois-quickspace-t.jpg" alt="QuickSpace Thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','hide','image5','','show','image4','','hide','image1','','hide')" /></div>
<img class="title" src="../images/title-whois.gif" width="282" height="38" /><br />

<p class="thumbs">
Systems &amp; Space inc. has been providing comprehensive storage and space solutions for Northern California since 1988.  What makes     SSI unique is that we are a &ldquo;single source&rdquo; storage partner for over 80% of our customers.
<p class="thumbs">Our applicaton knowledge and expertise are honed by years of experience, the reason over 83% of our new business comes from existing clients. SSI understands the composition and characteristics that are essential to space management and workflow efficiency
<p class="thumbs">.We specialize in developing storage and workflow solutions:

  <br />
<ul>
<li class="bullets"><a href="/solutions/mobile.html">High-Density Mobile Storage</a></li>
<li class="bullets"><a href="/solutions/shelving.html">Shelving Systems</a></li>
<li class="bullets"><a href="/solutions/modmillwork.html">Modular Millwork</a></li>
<li class="bullets"><a href="/solutions/dsmlockers.html">Law Enforcement Lockers</a></li>
<li class="bullets"><a href="/solutions/rcsmith.html">Medical Casework</a></li>
<li class="bullets"><a href="/solutions/profserve.html">Professional Filing Solutions</a></li>
</ul>
</div>

Thanks for your help!!!!

So how can I get them stay in the same place, inside the container??

Set your container to position: relative . Then anything you position absolutely inside that container we be positioned relative to the #container and NOT the body.

Ahhh.. so thats what relative positioning does...

Thanks for your help!

Well.. that's part of what it does
Positioning is one of the harder concepts of CSS to get your head around.