Absolute Positioning: Nav Bar

[dmastin]

I am trying to use absolute positioning to get my nave bar where I want it. I need it 250px from the top and 80px from the right.

When I use abs. pos., it places it relative to the browser window, but when I float it, it places it relative to the content div, just all the way to the right where I don't want it.

Here is the markup for css and html.
CSS below:

body {
background-color:#99bf60;

}
#wrapper {
text-align: left;
width: 850px;
margin-right: auto;
margin-left: auto;
}
#content {
width: 850px;
height: 530px;
background-image:url(../images/home_bg.jpg);
}
#navigation {
margin-top: 250px;
float: right;
width: 240px;
height: auto;
border: solid 1px #ffbfef;
background-color:#bf60a7;
}

HTML below:

<div id="wrapper">
<div id="content">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="Pages/our_team.html">Our History</a></li>
<li><a href="Pages/past_projects.html">Past Projects</a></li>
<li><a href="Pages/contact_us.html">Contact Us</a></li>
<li><a href="Pages/contact_us.html">Contact Us</a></li>
<li><a href="Pages/contact_us.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>

Any suggestions?

[Wickham]

That's right; position: absolute will be related to the top left corner of the screen normally.

However, if you put a position: absolute element inside a container that has position: relative, it will take its position from the top left corner of that container.

So if you make your wrapper position: relative and put the nav position: absolute inside it, the nav div will be fixed inside the wrapper, but if the wrapper moves (for instance centralising in different size windows), the nav will move with it but stay fixed relative to the wrapper.

http://www.wickham43.supanet.com/tutorial/divboxes.html