CSS Fixed Position float right - html

Question

I have this code:
<style>
.floatright
{
float: right;
margin-right:800px;
}
.menu {
padding: 0;
float: right;
width: auto;
position:relative;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display:inline;
padding:0;
margin: 0px;
}
.menu a:link,
.menu a:hover {
text-decoration:none;
padding:0 5px 5px 0;
margin-right: 8px;
}
</style>
<div class="floatright">
<ul class="menu">
<li>api</li>
<li>tools</li>
<li>blog</li>
</ul>
</div>
it is meant to float to the right of the page (not in the right corner - just to the left) and have gaps between each link.
The gaps work ok but when the screen is resized ti does not stay where it is supposed to
any ideas?

Answer 1

Charlie, because you have a 800px margin on the right of the div it will always have that margin regardless of the screen resolution.
If you're wanting the margin to become less based on screen resolution maybe look at using percentages or media queries.

Answer 2

wou need to center the parent div ...and then the menu will float right.
.floatright {
width:1000px;
height:50px;
margin:0 auto;
}
Where the width should be the width of the "orange box".
The menu already floats well in its parent div.
here is a jsfiddle example: http://jsfiddle.net/hvLkh/
Additional advice: 1) do not put divs outside the body tags, 2) add a hight attribute to the div to push the box down, and 3) add the font formatting straight into your css and avoid font tags ... like this:
.floatright {
width:1000px;
height:50px;
margin:0 auto;
font-family:"Trebuchet MS",Arial,Verdana,Tahoma;
}
And here is an updated fiddle: http://jsfiddle.net/n6mnP/1/