CSS: Help with position relative/absolute

Question

Hi,

I have a main menu bar at the top of my page. Now my #LinkToMenu fails at resizing and such, even if there's an position: relative. But it work fine if I set a specific width on the #mainmenu style, which I don't want it to. I even tried width: auto, with no luck.

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

<div id="LinkToMenu" style="position: absolute; right: 130px; top: 10px;">
  <a href="home.php">Home</a>
</div>

<img src="images/mainmenu_logo3.png" style="position: absolute; top: 2px; left: 210px; ">

What's the problem? How can I solve this?

The image with nearly same settings works fine at resizing and so, but not the barlinks?

Answer 1

I dunno if I'm understanding your problem correctly, but I do do something similar and I do it like this (in a style sheet): .header { position: relative; top: 0; left: 0; padding: 6px 6px 5px 5px; height: 85px; }

I seem to recall that the following absolute didn't work without the top and the left, so that the position is doing something.

Hope this helps

Answer 2

position:relative tells the css engine that this div is the reference to the inner divs.

position: absolute tells the that this div is absoulte positioned to the outter div which has relative position or if not assigned the browser window.

unless you give a width and height to the reltive div u make actually not find the absolute div position itself correctly.

Answer 3

not really sure I understand your question, but I think you should do the following:

#LinkToMenu{ position: absolute; right: 130px; top: 10px; float:right"}
#mainmenu{float:right; width:100%}

That should do the trick.

Answer 4

I think #linkToMenu needs to have a width assigned to it.