“float: right” doesn't put the div on the right side

Question

I don't understand why I can't get this to work. I am making this CSS vertical sidemenu and I want it to be in the right side of the window. So i have the div of the menu and I wrapped it in another div, setting it to float to the right.

Problem is, it's stuck on the left side. I want to be able to scroll it but leave the rest of the page in the same place. this is the fiddle: http://jsfiddle.net/xQgSm/121/

this is part of the 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>

Answer 1

You need your wrapper to be width: 100% of the page.

Try adding:

<div id="wrap" style="height: 100%; width: 100%; position: absolute; overflow-y: scroll;">

Answer 2

Because your element has position: absolute; , the correct way is to set the right property, eg:

CSS:

#wrap{ right: 0;}

-jsFiddle-

Answer 3

Because your #wrap is positioned absolute, it looses the default block behavior, which means it is not 100%-width anymore, but only as wide as its widest child.

So in your case you have 3 possibilities:

• loose the position absolute or
• position the #wrap to the right or
• give it 100%-width and then float only the #cssmenu

Answer 4

I had the same problem with some rtl and assigning

width:100%

worked for me. your code also is fixed with it try http://jsfiddle.net/ofdqyy4g/