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;
}