CODEWITHSUNDEEP
htmlcsspositioning
content01
content01

Reputation: 3225

How to keep elements in the same position when the browser is resized?

I have the following html:

<body>
    <h1>Something</h1>
    <img id="myid" src='images/bigimage.png'/>
    <div id="container">
      <div id="fast-back">
        <p class="big-font">SOMETHING</p>
        <p class="small-font">SOMEThiNG ELSE</p>
      </div>
    </div>
</body>

And the CCS for it is:

html {
        overflow-x: hidden;
      }

      body {
        margin: 0;
        padding: 0;
        background: url(images/body-background.png) top no-repeat;
        min-height: 860px;
        height: 860px;
      }

      h1 {
        margin: 0;
        padding: 0;
        position: absolute;
        color: white;
        visibility: hidden;
      }
#container {
        margin: 0 auto;
        padding: 0;
        position: relative;
        min-width: 1336px;
        height: 860px;
        width: 1336px;
      }
#myid{
        position: absolute;
        left: 50%;
        right: 50%;
        margin-left: -1280px;
        margin-right: -1280px;
        z-index: 1004;
      }
#fast-back {
        position: relative;
        margin-left: 15%;  /*it moves even using pixel*/
        top: 272px;
        z-index: 99999;
        text-align: center;
        width: 126px;
      }

However, when I resize the browser window, the "fast-back" div moves to the right.

How can I prevent this behaviour?

Thanks!

Upvotes: 2

Views: 7711

Answers (1)

Jaime Gris
Jaime Gris

Reputation: 1126

Looking at #fastback CSS rule, you are using percentage instead of pixels on margin-left. Change it to pixels as unit of measure.

If you are using percentage as unit of measure, the left margin of the element, in your case, will move in relation to the viewport.

And if you are using pixels, on the other hand, the margin stays on the same location, even if the browser is resized.

Update

The solution is remove the width of the #container. See the following link.

http://jsfiddle.net/jlratwil/LB8rf/1/

The reason why the first solution does not work because the width of the container is set to 1336 pixels and centered aligned via margin: 0 auto. If the browser viewport width reaches beyond 1336 pixels during resize, the #fastback element will move.

Upvotes: 2

Related Questions