Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

floating nav to the right with a fixed position? [closed]

Tags:

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/

like image 820
AMC Avatar asked Feb 20 '13 23:02

AMC


People also ask

How do you fix a float right?

Method X: Just create the required division within another division. Give postion:fixed; width:100%; properties to the outer div. give float:right; property to the inside div.

Does float work with position?

How float and position work together? They don't. An absolutely positioned element cannot float. A floating element cannot be absolutely positioned.

Why float right is not working CSS?

Here is one way of doing it. The trick is to apply overflow: auto to the div , which starts a new block formatting context. The result is that the floated button is enclosed within the block area defined by the div tag. You can then add margins to the button if needed to adjust your styling.


1 Answers

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; } 
like image 88
Brad M Avatar answered Sep 28 '22 05:09

Brad M