"float: right" does not place the div on the right side
I don't understand why I can't get this to work. I am doing this vertical sidemenu CSS and I want it to be on the right side of the window. So I have a div from the menu and I wrapped it in another div, setting it to float to the right.
The problem is that it is stuck on the left side. I want to be able to scroll through it, but keep the rest of the page in the same place. this is the fiddle: http://jsfiddle.net/xQgSm/121/
this is a piece of code:
<div id="wrap" style="height: 100%; position: absolute; overflow-y: scroll; float: right">
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
source to share
Since your element has position: absolute;
, the correct way is to set a property right
, for example:
CSS
#wrap{ right: 0;}
-jsFiddle -
source to share
Since your #wrap is positioned absolute, it loses the default blocking behavior, which means it is not 100% forceful, but only as wide as its widest child.
So, in your case, you have 3 possibilities:
- lose position absolute or
- place #wrap to the right or
- give it 100% -width and then float only #cssmenu
source to share
I had the same problem with some rtl and assignment
width:100%
worked for me. your code is also fixed with it http://jsfiddle.net/ofdqyy4g/
source to share