CODEWITHSUNDEEP
javascriptjqueryhtmlcss
wannabe programmer
wannabe programmer

Reputation: 683

"float: right" doesn't put the div on the right side

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>

Upvotes: 2

Views: 1504

Answers (4)

Sebastian G. Marinescu
Sebastian G. Marinescu

Reputation: 2394

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

Upvotes: 1

HADEEL
HADEEL

Reputation: 323

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/

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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

CSS:

#wrap{ right: 0;}

-jsFiddle-

Upvotes: 1

Guy
Guy

Reputation: 11305

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;">

Upvotes: 4

Related Questions