Positioning images

Question

So, I'm trying to do something like this:

The web page is supposed to look like a phone app, and it has to be responsive. The problem is that I can't position the buttons right. They always move in relation to the 'tablet' whenever I'm re-sizing the browser window. This is what I've tried (with only one button):

CSS

img {
max-width: 100%;
}
#tabletBG {
width : 60%;
}
#buttons{
position:absolute;
width:10%;
left:40%;
top:12%;
}

HTML

<div id="content">
    <div id="tablet">
        <img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img>
        <div id="buttons">
            <img id="quienes" src="images/quienes.png" alt="quienes"></img>
        </div>
    </div>

</div>

I just want the buttons to stick to the tablet. Even if i'm re-sizing the browser window. Is there an easier way of doing this? Thanks.

Answer 1

Regarding your original question above:

Try setting the position of your content div to absolute , fixed , or relative .

This will ensure that your absolutely positioned buttons div contained within it will use it as a reference point rather than referring its resizing/relocating to the window.

DEMO: http://jsbin.com/tixed/1/

Regarding your comment below:

It works, but for an extent. There's a point that if you keep expanding the browser window, the tablet will keep expanding, but the button won't. Here's a link .

The problem there is that your image is only 96 pixels wide, and you've set a CSS rule for all img elements to have a max-width: 100% . Under these conditions, the image will expand only to the point of its original size (the default action, and not what you want), and only to the point of its containing element (by your CSS rule, and to no noticeable effect).

To correct, ideally you would get a larger image. For a quick fix, change its rule to be simply width: 100% . This will ensure the image always expands to the point of its containing element.

Answer 2

Yes, whenever you re-size your browser the images will change their alignment and this is a default behavior of browsers. Only you can make this images to float.

Try this:

img{
  float: left;
}