Question

so i have a content box and this menu box.. now the menu box moves when you have the browser in normal fullsize, and if you change size of the browser…

here is picture:
http://img12.imageshack.us/img12/827/whyw.png http://img12.imageshack.us/img12/827/whyw.png

What do i do wrong?

Here is my code:

#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
}

#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
}

Answer 1

If you want to use position:absolute you’ll have to set the parent to position:relative.
It is because position:absolute is positioned relatively to the last parent which is positioned.
By default, it is your body element. That means that your block will be set relatively to the body, it’s why when you resize your browser, your block is moved away from is initial position.

If you the set the parent with a position:relative your block will be set relatively to it. You’ll just have to set a top/bottom and/or left/right coordinates.

Something like this should do the trick :

#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
top: 50px;
right: -10px;
}

#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
position: relative;
}