css: simulate a "min-top" property

Question

I have the following div:

#leftmenu{
position: fixed;
top: 50%;
margin-top: -65x;
height: 130px;
}

This div is placed vertically centered on the page and it is fixed, the webpage is very tall but the div is always visible in the center of the screen. With these properties, if I resize the window the menu moves because it has to stay at 50% of the current window size. What I want is:
1) when I load the page, depending on the screen resolution, the div must place 50% top (ok with my code)
2) if I resize the window, it must stay fixed. I hoped there was a property like "min-top" or something like this to force the top level, but it doesn't exist. Can you help me?

Solution

1) when I load the page, depending on the screen resolution, the div must place 50% top (ok with my code)

Suggestion: For (depending on screen resolution) that you should have media queries, its a css which would let you have specific propeties for your divs depending on the screen resolution. Suppose you have a default 960px width, and when the screens gets 330px you can use this:

@media only screen and (max-width: 330px) {
  /*change the div position or what so ever. 
  This will work like javascript but is better!*/
}

Then you will see the change in the div's position or its style of width and bla bla.

2) if I resize the window, it must stay fixed. I hoped there was a property like "min-top" or something like this to force the top level, but it doesn't exist.

Yes, there is no code that would do what you want to without writing a thing. For this you must write these lines.

1. For stay fixed?

   write this:

   div {
position: fixed;
}

   It should go inside the media query. Then when you will resize, it will get the second style that would go for the second screen!

2. Force to top-level? You can use this:

   div {
position: absolute;
top: 0;
}

The top: 0; would make sure that it should have margin-top: 0;. You can use this code.

Edit:

You posted this in the comment:

I've googled on media query. I think it is not the solution to my problem. Different resolution are not a problem, with the actual css with every resolution the div is placed 50% top. The problem is when (with all resolutions) I resize the browser window. I'd like that resizing the window the menu doesn't move up or down

For this, the issue is almost totally opposite! The issue is the percentage, when you are resizing the div, you are making the div shorter or larger! Which is changing its position.

You can use this for the body tag.

body {
min-width: 900px;
max-width: 900px;
}

This way, it will always just stay the 900px, no matter you resize it shorted or larger. It will not change or will never change its width untill you change it using media-query! I hope I answer your question now.