Align div with fixed position on the right side

Question

I want to show a div which is always visible even as the user scrolls the page. I have used the CSS position: fixed; for that.

Now I also want to show the div at the right hand corner of the parent div.

I tried to use this CSS code to achieve the goal:

.test {
  position: fixed;
  text-align: right;
}

But it doesn't align the element on the right side.

My example page can be found here, the div element I want to align is called test under the parent class parent.

Is there any CSS or JavaScript solution to aligning the fixed position element on the right side of the screen?

So you want the word "Another Test" to appear in the top right corner of the grey box and for the grey box to remain in place when the user scrolls? — Richard JP Le Guen, May 13 '10 at 19:51
no the div "test" with text Another Test to be aligned right to the parent div that is "parent" and the div "test" to remain in place as the user scrolls... — Pradyut Bhattacharya, May 13 '10 at 20:01

score 52 · Answer 1 · answered Jul 23 '10 at 10:45

52

You can use two imbricated div. But you need a fixed width for your content, that's the only limitation.

<div style='float:right; width: 180px;'>
 <div style='position: fixed'>
   <!-- Your content -->
 </div>
</div>

answered Jul 23 '10 at 10:45

246tNt

2,122
1
16
20

3

so glad i found this answer.. didn't think there was a css solution for this. looks like i just needed the "fixed" element to be inside another div the whole time. – Chris Aug 22 '11 at 21:33
10

great answer - + 1 for the word imbricated – Ortal May 09 '13 at 12:52

score 45 · Answer 2 · edited Nov 16 '18 at 03:59

45

Use the 'right' attribute alongside fixed position styling. The value provided acts as an offset from the right of the window boundary.

Code example:

.test {
  position: fixed;
  right: 0;
}

If you need some padding you can set right property with a certain value, for example: right: 10px.

Note: float property doesn't work for position fixed and absolute

edited Nov 16 '18 at 03:59

Lisa

4,333
2
27
34

answered Nov 28 '13 at 05:57

Santosh

1,027
13
12

score 29 · Accepted Answer · edited Nov 01 '12 at 16:17

29

With position fixed, you need to provide values to set where the div will be placed, since it's a fixed position.

Something like....

.test
{
   position:fixed;
   left:100px;
   top:150px;
}

Fixed - Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

More on position here.

edited Nov 01 '12 at 16:17

Nikhil Girraj

1,135
1
15
33

answered May 13 '10 at 19:26

Gabe

49,577
28
142
181

"Generates an absolutely positioned element" - perhaps a rephrasing is in order, since "absolute positioning" is another distinct concept? – Richard JP Le Guen May 13 '10 at 19:33
3

@Richard JP Le Guen - Perhaps discuss that with the author at w3c then. – Gabe May 13 '10 at 19:34
i found a solution with using only left:400px; no need of using the top and bottom... but i should say... not a complete solution for a complex problem. either w3c or the browser guys should set a high standard for ui with css – Pradyut Bhattacharya May 13 '10 at 19:41
@Pradyut Bhattacharya - I don't see what the problem is, you have a fixed position set for the `
`. You need to supply the position it should live at, if you don't its going to sit at the default position. If you don't want that functionality, then I suggest you choose another type of positioning so `text-align: right` works, but you chose fixed so you have to define some values.
– Gabe May 13 '10 at 19:45
@gmcalab how about that i want the postion:fixed as i want the div to be visible as the user scrolls and the div to be aligned right and i m changing the text of the parent div with javascript and and the parent div's width changes to less than 200px.. ha ha a complicated question... but you don't have a answer now... – Pradyut Bhattacharya May 13 '10 at 19:51
@gmcalab - Dude, you linked to w3schools not w3c ;) There's kind of a big difference. – Richard JP Le Guen May 14 '10 at 12:02
the question was about "right with position fixed", thus using a left: is not the solution here. – ensonic Mar 23 '12 at 14:46
The question was solved and selected as answer almost two years ago, thus making your observation useless. – Gabe Mar 23 '12 at 16:57
This is the incorrect answer. See below for the answer describing the right:x style attribute. – Lisa Nov 16 '18 at 04:00

score 8 · Answer 4 · edited Jul 29 '15 at 00:43

8

Trying to do the same thing. If you want it to be aligned on the right side then set the value of right to 0. In case you need some padding from the right, set the value to the size of the padding you need.

Example:

.test {
  position: fixed;
  right: 20px; /* Padding from the right side */
}

edited Jul 29 '15 at 00:43

Konstantin Grushetsky

1,012
1
15
32

answered Aug 12 '10 at 07:01

Chris

81
1
1

There is indeed no need to use a nested div (although that works too). – ensonic Mar 23 '12 at 14:44
Hmm... This didn't place the div at the right hand corner of the parent div but right relative to the html-element, ie alight right to the full width of page. So a nested approach seems necessary. Missing something? – K. Kilian Lindberg May 13 '14 at 14:47

score 1 · Answer 5 · edited Apr 11 '22 at 08:53

1

Here's the real solution (with other cool CSS3 stuff):

#fixed-square {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9500;
    transform: rotate(-90deg);
}

Note the top:0 and right:0. That's what did it for me.

edited Apr 11 '22 at 08:53

Harshil Modi

397
3
8
15

answered Jun 13 '12 at 18:59

user1429980

6,872
2
43
53

1

I don't know why they vote you down but your solution solve my problem. – Asme Just Jul 01 '13 at 07:55
@AsmeJust Most likely because of the insane amount of overhead in his code. The solution is supposed to be around 3 to 5 lines, He adds in a lot of extra, unnecessary stuff. – FullyHumanProgrammer Jan 25 '16 at 14:22

score 1 · Answer 6 · answered Mar 25 '17 at 09:36

1

make a parent div, in css make it float:right then make the child div's position fixed this will make the div stay in its position at all times and on the right

answered Mar 25 '17 at 09:36

Pizzarius

51
5

score 1 · Answer 7 · answered Mar 29 '21 at 08:12

1

I use this to put a div (with its stuff inside) at the bottom-right of the page with some margin:

.my-div-container{
    position: fixed;
    bottom: 1rem;
    left: 90%;
}

answered Mar 29 '21 at 08:12

Andrea Ciccotta

598
6
16

score 0 · Answer 8 · answered Dec 29 '21 at 08:51

The best solution I found is to give the element a left margin . The elements below it in left margin will be ckickable

#my_id{
      margin-left: 75%;
      position:fixed;
      right: 0;
    }

<div id="my_id" >
    My Text
  </div>
  <a href="http://www.stackoverflow.com">Stack Overflow</a>

score -1 · Answer 9 · answered Jul 17 '20 at 21:21

-1

Just do this. It doesn't affect the horizontal position.

.test {
 position: fixed;
 left: 0;
 right: 0;
 }

answered Jul 17 '20 at 21:21

John Adeniran

97
6

Align div with fixed position on the right side

9 Answers9

Linked