CSS/HTML Positioning Issue

Hello,

http://link-view.com/NotLoggedIn.aspx

If you resize the page displayed in the above link you will see that the layout is a fluid layout -- It will reposition itself based on the size of the browser window.

The problem i'm having is that i need all the elements on the page to stay in thier position at all times. So that means, even if the browser window gets resized, i can not have these css elements repositioning themselves with the browser. It moves too many things around and it looks bad. I want to be able to use the horrizontal scroll bar when the browser is sized small, rather than see all my CSS boxes toppling over themselves. Please take a look at the link to see exactly what i'm talking about.

Here is what i've tried already:

I've tried to add a table and simply place each css element into the proper rows and coloumns. When i did that it almost worked for me, i got it so that everything would stay in place when the browser was resized, but the right column was way to the right and not in place, no matter the browser sizing.

I also changed the CSS for the content boxes to set their position to fixed, releative, absolute, & static. I also tried to utilize the float feature in CSS. Nothing resolved the issue.

i've scrapped that process above and have started from square one again. Hopefully that makes things easier for people to help me out.


here is what i'm working with presnetly: The above link is a page that i'm applying the following css code to.

-----------------------------------------------------------------------
#leftcontent {
            position: absolute;
            left:10px;
            top:114px;
            width:160px;
            background:#fff;
            border:1px solid #000;
            /* IE hack : */
top: expression(body.scrollTop + 128 + "px");
/*ie Hack*/
            }

      #centercontent {
            background:#fff;
               margin-left: 159px;
               margin-right:159px;
               padding:2em;
            border:1px solid #000;      
            voice-family: "\"}\"";
            voice-family: inherit;
               margin-left: 161px;
               margin-right:161px;
            }
      html>body #centercontent {
               margin-left: 161px;
               margin-right:161px;
            }

      #rightcontent {
            position: absolute;
            right:10px;
            top:114px;
            width:160px;
            background:#fff;
            border:1px solid #000;
            
/* IE hack : */
top: expression(body.scrollTop + 128 + "px");
/*ie Hack*/
            }
      
      #banner {
            background:#fff;
            height:99px;
            border-top:1px solid #000;
            border-right:1px solid #000;
            border-left:1px solid #000;
            voice-family: "\"}\"";
            voice-family: inherit;
            height:98px;
            }
      html>body #banner {
            height:98px;
            }
#header
{
      padding-top:0px;
      padding-left:1em;
}
.moveableloginbox {
      font-weight:500;
      position:absolute;
      top:0px;
      left:490px;
      text-align:left;
      padding-top:1em;
      padding-right:.5em;
      border:none;
      /* IE hack : */
top: expression(body.scrollTop + 0 + "px");
left: expression(body.scrollLeft + 487 + "px");
/*ie Hack*/

/* Navigation */

#chromemenu{
width: 100%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(images/chromebg.gif) center center repeat-x; /*Theme Change here*/
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 12px Verdana;
}


#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background: url(images/divider.gif) center right no-repeat; /*Theme Change here*/
}

#chromemenu ul li a:hover{
color: #494949;
}

#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " ";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*Theme Change here*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #F0F0F0;
}


--------------------------------------------------------

i wont post the HTML here for the simple fact that it would take up way too much space, but i've posted the CSS that is being used in the HTML.

any thoughts on how i can get all the elements on the page to stay in their place when the window is resized?

thanks, your help is greatly Appreciated!