Home/ Questions/Q 6859239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:15:30+00:00

When resizing the browser I noticed that all the elements get out of place

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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