Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align div with fixed position on the right side

Tags:

javascript

css

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?

like image 245
Pradyut Bhattacharya Avatar asked May 13 '10 19:05

Pradyut Bhattacharya


People also ask

How do I fix the text on the right side in HTML?

To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left and right alignment.


2 Answers

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> 
like image 128
246tNt Avatar answered Sep 25 '22 00:09

246tNt


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

like image 36
Santosh Avatar answered Sep 25 '22 00:09

Santosh