Positioning things inside a DIV (css-related)

Question

i'll try to make my question really simple 2 you

Basically, i have a DIV, in which i have a picture

What CSS styles should i apply to the picture to position it correctly inside the div with the condition that everytime i resize the browser window it stays there (inside the div) at the same distance from the borders

Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!

EXAMPLE HERE

code

html

<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>

css

that's the question :)

Answer 1

You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:

#super_div
{
  position: relative;
}

Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:

#eyes
{
  position: absolute;
  top: 20px;
  left: 20px;
}

That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics. Hope this helps.