Picture moves when browser zooms

Question

I'm new to HTML and CSS, and also new on this forum. I have some trouble with the browser zoom function. I want to stick an image to the bottem of my DIV, just like I show you in this picture. http://imageshack.us/a/img29/1417/n81h.png

But when I zoom with my browser, the image moves and doesn't line up any more with the DIV's bottom, like here: http://imageshack.us/a/img14/221/vrqd.png

What can I do about it? I've searched a lot but can't find a clear answer. Thanks!

<head>
    <title>Portfolio</title>
    <link href="MyStyle.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:#81DAF5">
    <div>
        <div ID="Page1">
            Welcome at my portfolio
            <div ID="Creative">Being creative is being me</div>
            <div><img id="head" src="head2.png"/></div>
        </div>            
        <div ID="Page2">Random Text 2 :)</div>
        <div ID="Page3">Random Text 3 :)</div>
    </div>        
</body>

}

#Page1{
    font-family:Cartoon;
    font-size:100px;
    text-align:center;
    background-color:#D8D0F4;   
    width:80%;
    height:80vh;   
    border-radius:60px;
    margin: 10vh auto 10vh auto;
    border: 10px solid #FFE1E1;
        
}

    
#Page2{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 10vh auto;
    border: 10px solid #FFE1E1;
}

#Page3{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 0vh auto;
    border: 10px solid #FFE1E1;
}
    
#Creative{
    font-family:cartoon;
    font-size:50px;
}

people hardly use the browser zoom. Why do u want to use it? and you should probably post your codes or make a JSFiddle. It seems to be an easy problem to solve. If you make the parent of the image into position: relative and the image into position: absolute; bottom: 0; that should help. But not sure without seeing your codes first. — Chanckjh
I've added the code. It works for now with the zoom, but the image is not exactly in the center any more, but more to the right. How can I fix this? Thanks for the quick reply! EDIT: I've fixed the last part by myself by adding at the image: position: absolute; bottom: 0; left:50vh; — user2781756

roostaamir roostaamir · Accepted Answer · 2013-09-15T19:08:23

You can use absolute positioning if you want to stick your object somewhere! If you want to place an object somewhere fixed in your parent div using absolute positioning,your parent div should have some kind of position by itself(fixed,relative,absolute)(otherwise the absolute positioning will occur from the body element!!!)

so,in conclusion,you should use position:relative for your Page1 div and then use position:absolute;bottom:0; for the div that has your image in it!

Picture moves when browser zooms

1 Answers