CSS and position little problem

Question

hello 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:

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

You may want to have a look at absolute positioning vs. relative. Absolute will tell the browser that a certain item is to display in the same spot no matter the window size. I think this is what is causing your issue.

Have a look here for more details:

http://webdesign.about.com/od/advancedcss/a/aa061307.htm

Hope this helps!

Answer 2

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;
}