css position when resizing browser

When resizing the browser I noticed that all the elements get out of place and the website layout gets distorted. This also occurs on with low-resolution.

Is this because I have used position:relative;? How can I make the page elements not move from their position when resizing.

body{
    background:url(../img/bg-silver.jpg) #F2F2F2;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:18px; color:#636363;
    margin-top:10%;
}
#containerHolder {
    background: #eee;
    padding: 5px;
    position:relative;

}


#container {
    background: #fff;
    background:rgba(245,245,245,0.8);
    border: 1px solid #ddd;
}

#main {

    margin: 0 0 0 20px;
    padding: 0 19px 0 0;
}

Solution

That usually only happens with floats. In any regard what you want to do is create a wrapper div with the width you want, and then just set overflow to scroll:

HTML:

<body>
    <div id="wrapper">
        <!-- content here -->
    </div>
</body>

CSS:

#wrapper {
    width:980px;
    overflow-x:scroll;
}