CSS: Help my menulinks doesnt stay at the same place

Question

Help! This is my menu. I want it to stay at the same place, so if you resize it or drag the browser it shouldnt follow the browser and move the menu to the side

<div id="mainmenu" style="position: relative;">
<div id="menuLinks" style="position: absolute; right: 70px; top: 10px; ">
<a href="home.php">HEM</a>
<a href="#">PROFILER</a>
<a href="#">BILDER</a>
<a href="#">DISKOTEKER</a>
<a href="#">EVENTS</a>
<a href="#" class="menu_class">KONTROLLPANEL</a>
</div>

This works only if i change the div mainmenu line to:

<div id="mainmenu" style="position: relative; width: 1200px;">

(giving a width: ) then it stays at the place. But I do not want to specify width, because then it will end too early for some other screen resolutions and so..

How can i fix this?

Answer 1

Use position: absolute; for a fixed position within the document (will move scrolling the page).

Use position: fixed for a fixed position in the browser window. (won't move when scrolling the page)

In both cases, use left and top to specify the starting position.

You won't need to specify a width in either case.

position: fixed won't work in IE 6.

Answer 2

You can use position absolute and set the left attribute to whatever you measure it out to be and drop the right attribute.

But a better solution may be to use floating divs. It's impossible to tell though without looking at the rest of your code.

This is an interesting project you may be interested in. http://960.gs/