floating nav to the right with a fixed position?

css position css-float css-position
AMC picture AMC · Feb 21, 2013 · Viewed 57.2k times · Source

My site navigation needs to be floated to the right side of the container, but be in a fixed position so that whenever the page scrolls, the navigation is still on the right 350px from the top. This worked until I applied position:fixed, after doing that the navigation is stuck on the right. Any ideas how I can have the best of both worlds(right side, and fixed position)?

http://jsfiddle.net/eeCgr/

Answer

Brad M picture Brad M · Feb 21, 2013

The usage of position: fixed requires adjusting the top/right/bottom/left CSS to get your nav element to the desired location.

For example:

nav { 
    right: 0; 
    top: 50%; 
}

or

nav {
    right: 0; 
    top: 0;
}

Related questions

Float right and position absolute doesn't work together

I want a div to be always at the right of its parent div, so I use float:right. It works. But I also want it to not affect other content when inserted, so I use position:absolute. Now float:…

Read More
Mixing floating and fixed positioning

here is a standard use of float and fixed : <html> <head> <style type="text/css"> #bigDiv { background-color: red; height: 2000px; width: 100px; float: left; } #littleDiv { background-color: green; height: 400px; width: 200px; float: left; } #littleDivFixed { …

Read More
CSS: Placing divs left/center/right inside header

I've been trying to create a site with the following structure: But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and …

Read More