DIV keeps moving when I resize browser

Question

So I'm coding a layout and I'm using a DIV to keep my iframe within the bounds of the layout. The problem is my DIV keeps moving whenever I resize the browser. I've looked around for answers, but none of them seem to help with the problem I have.

Heres the website:

http://www.buymycookies.org/index.html

This is my code:

<div style="position:absolute; top:280; left:560"> 
<iframe src="main.html" name="main" width="240" height="240" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" scrolling=auto allowtransparency=true>
</iframe>
</div>

As a side-note, I want to be able to control where my DIVs go because it needs to stay within the box of the layout.

Thank you for helping!

Answer 1

You are using absolute positioning so your <div> containing the <iFrame> will always be 280 pixels from the top of the page and 560 pixels from the left.

You should really read up on css positioning basics. A couple of good starting points could be

• http://www.barelyfitz.com/screencast/html-training/css/positioning/
• http://www.w3schools.com/css/css_positioning.asp

Answer 2

Position absolute styles the element relative to the size of the whole page. thus when the page gets bigger the div moves to the left( left:560 ). You could use position relative instead:

margin-top: -530px;
position: relative;

or

position: relative;
top: -530px;

or

margin-left: -120px;(because this div has a width of 240px)
position: absolute;
left: 50%;