The code below works jiffy until I put a table within the Primary Content area. Then the secondarycontent is still on the right but pushed below the primary content. BTW, the table is for tabular data.

CSS:

#container {
    position: relative;
    margin: 0px 40px 0px 40px;
    }
 
#primarycontainer {
    float: left;
    margin-right: 230px;
    }
 
#primarycontent {
    margin-right: 240px;
    }
 
#primarycontent p {
    margin-bottom: 20px;
    }
 
#secondarycontent {
    float: right;
    width: 200px;
    border-left: 1px #aaa dotted;
    }
    
 .clearit {
    clear: both;
    height: 1px;
    }

HTML:

<div id="container"> 
    <div id="primarycontainer"> 
        <div id="primarycontent"> 
        
            <!-- Primary content  -->
                        
        </div>
    </div>
        
    <div id="secondarycontent">  <!-- aka right sidebar -->
        <ul>
        <li class="subMenuTitle">Main</li>
        <li><a href="/documentation/">Documentation</a></li>
        <li><a href="/monitoring/">Monitoring</a></li>
        <li><a href="/bookmarks/">Bookmarks</a></li>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
    </div>
              
    <div class="clearit"></div>
              
</div>

Have you tried explicitly setting the table width?

It wasn't set. But I set it and the secondary div is in the same postition.

I think I see why. You have margins on both your primary container and primary content divs, which add up to 470 pixels. Your sidebar div is 200 pixels wide. That means you've used 670 pixels of space up before you even put content into the primary content div.

Take out some of that white space, and you'll at least be closer to fine.

Thanks for the help Adam. Turns out the fix was to put the right div before the left one. I've done this several times before and should have known.