Menu
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/
820
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.
How float and position work together? They don't. An absolutely positioned element cannot float. A floating element cannot be absolutely positioned.
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.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
