CSS: Float Right - Position Issue?

[drunkel]

Having an issue aligning/floating a nav bar to the right edge of the browser. Here is a screen shot:

http://gonedesigns.com/misc/demo1.jpg

here's some code:

* {

padding: 0;
margin: 0;

}

html {

height: 100%


}


html > body {

height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}


#container {

margin: 0;
padding: 0;
min-width: 100% !important;

}

* html #container {

height: 100%;
}

Here's the CSS for the nav bar:

#nav_area {

position: relative;
top: -78px;
left: 83%;
margin: 0;
padding: 0;
/* background: #fbaa19; */
height: 30px;
width: 500px;
z-index: 200;
/* border: 1px dotted #7db407; */

}

#nav_bar, ul, li {


display: inline-table;
list-style: none;
font: 300 10pt/18pt Helvetica, Arial, sans-serif;
color: #626262;
padding: 0 15px 0 2px;
top: -7px;
left: -35px;
position: relative;

}

Any help is great. Thanks.

[drunkel]

So I think I might have solved it but in a very ugly way, and I am not sure how stable it is cross browser.

I added:

#nav_area {

position: relative;

float: right;

left: 14em;

top: -50px;

margin: 0;
padding: 0;
height: 30px;
width: 500px;
z-index: 200;
}

[Syous]

It looks fine to me.

[jel3]

you shouldn't use float and position at the same time. try doing:
position: absolute;
right:0; top:0;

[redelite]

^ What he said, if you use floats, use positive and negative margins.. otherwise use positions, try not to mix and match

[drunkel]

cool, thanks.