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?
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>
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
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.
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 */
}
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
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%;
}
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>
Stack Overflow
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.
Just do this. It doesn't affect the horizontal position.
.test {
position: fixed;
left: 0;
right: 0;
}
Related
Let's say I have a site with a central div, approximately 50% of the width of the window, with other divs either side of it filling up the remaining space. The spanning divs are fixed, and don't move, nor can they scroll.
At the moment, when my mouse is over one of the spanning divs, I (naturally) can't scroll the central div. My question is this: is there a way to ALWAYS have scroll focus on a particular div, no matter where the mouse is located on the page?
EDIT: What I actually have is this:
<div id='wrapper'>
<nav id='sidebar'></nav>
<div id='rhs'></div>
</div>
where wrapper and sidebar both have position fixed, and sidebar and rhs are adjacent in the center of wrapper (i.e. margin: 0 auto; to sit them in the middle). Scrolling with my mouse over either wrapper or sidebar does not scroll rhs, despite the positions being fixed (so Toni Leigh's answer doesn't work for me here).
Yes, you can do this using position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. The the central div scrolls regardless of where the mouse pointer is. You use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
Please see this example
Something like this? Demo
You set the two side divs to be have a position: fixed property and by using top: 0, left: 0 and right: 0 you can move these into position to the top left and top right respectively.
Then you can have a regular element in the middle. The scroll will now always affect the non-fixed element. (I added a background picture so you can see they don't scroll).
HTML
<div class="fixed left"></div>
<div class="center"></div>
<div class="fixed right"></div>
CSS
.fixed {
width: 25%;
height: 100%;
background-image: url('http://www.6wind.com/blog/wp-content/uploads/2014/04/Vertical-White-car-Banner.jpg');
position: fixed;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
position: relative;
margin: 0 auto;
width: 50%;
height: 5000px;
background: red;
line-height: 0;
}
I have a menu which looks like this, where on hovering over "tanfa demo example" the sublist come on RHS
The problem is, that in my case the whole menu is on extreme right. I want sublist to appear on LHS.
I have tried using CSS "left: 0; top: 0;" property, but that would just show sublist on top-left corner of its parent element, where it overlaps as follows,
I want the menu to start from "left: 0; top: 0" of its parent, but then slide towards its left. I would prefer a solution through CSS.
try right: 100% instead of left: 0, which basically tells your menu that it should position its left edge to the leftmost edge of its parent. right: 100% should tell it to align its rightmost edge with your parent menus leftmost edge. Hope this helps!
If I understand you correctly, to make the sublists appear to the left of the parent set their left property to -100%.
#menu ul ul ul {
position: absolute;
top: 0;
left: -100%;
width: 100%;
}
http://jsfiddle.net/G5yQx/1/
Can try this:
set a negative margin for child (pop-up list) = 2 x the margin of parent list
i.e: Add something like this to pop up list.
{
margin: 0 -300px; /* 0 denotes top and bottom margin : 0 */
}
PS: Not advisable though looking at your code. Will need few more changes in the code to work properly
left:0 means you define position to it's. So, what's the solution instead of left:0 you can define left:auto;. Write like this:
#menu ul ul ul {
position: absolute;
top: 0;
left:auto;
right:100%;
width: 100%;
}
or remove left:0 as jakee already explain.
Check this http://jsfiddle.net/wEExT/9/
How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?
Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck
You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.
CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.
I've seen so many times that some websites use a kind of button or a kind of bar which always float to a specific position like left edge of screen or at the bottom of the screen and whenever we scroll down a page it remains constant in terms of position..
How to apply this either by CSS or javascript or jquery.
Thanks in advance,
Guru
The simplest way to achieve that effect is position: fixed
<div style="position: fixed; left: 64px; top: 64px">Hey, I'm fixed!</div>
From quirksmode.org:
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
only downside: Doesn't work with IE6.
.someclass {
position: fixed;
top: 33px;
right: 55px;
}
JQuery:
You may find this useful for that.
CSS:
You just set position to fixed and give it top, left, bottom and right depending on where you want to make it appear, example:
<style>
#some_id
{
position:fixed;
top:100px;
left:100px;
}
</style>
Now you assign that style id to the element you want to make fixed:
<div id="some_id">So, I'm FIXED :)</div>
.
Resources:
More info about CSS fixed property.
Also you can add the z-index property for displaying the content over other contents , it helps to display the div as a separate object displayed irrespective of the page content..
ex:
<div style="position: fixed; z-index:1000; left: 64px; top: 64px">Hey, I'm fixed!</div>
value 1000 is given to override any z-index properties of any other elements
I'm using jQuery to create a "dialog" that should pop up on top of the page and in the center of the page (vertically and horizontally). How should I go about making it stay in the center of the page (even when the user resizes or scrolls?)
I would use
position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);
but with this solution and a browsers viewport-size of less than your dialog is, parts of the dialog will be unreachable on top and left sides because they are outside the viewport.
So you have to decide if it's suitable for your dialogs size.
(CSS doesn't know how to calculate, yet. So the little math over there has to be done by you, right now. Therefore your dialog has to be a fixed size which you have to know.)
Edit:
Oh yes, if you want to serve your dialog for the IE6 too, you should do something like this:
#dialog { position: absolute; }
#dialog[id] { position: fixed; }
Since IE6 is not capable of fixed positions and also not capable of attribute-selectors, the IE6 will be the only one who has the position set to absolute. (This will only affect with scrolling behaviour. absolute stays on its place in page and fixed stays on its place in the browser. The rest is similar.)
Check out Infinity Web Design's piece on this.
#mydiv {
background-color:#F3F3F3;
border:1px solid #CCCCCC;
height:18em;
left:50%;
margin-left:-15em;
margin-top:-9em;
position:absolute;
top:50%;
width:30em;
}
This is the CSS they use, and I've tested it out in multiple browsers.
You'll note that the left margin is negative half the width and the top margin is negative half the height. This takes care of the centering, more or less, with absolutely positioning it at 50% top and left.
To put a div horizontally in the middle I always put margin: 0 auto. But it cannot be a floating element and in IE I always needed to put a div around and then give it the property text-align: center, so that the inside div is centered horizontally.
If you know the element's offset dimensions (width/height + padding), you can use this CSS:
elementContainerSelector {
position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
elementSelector {
position: absolute;
top: 50%;
left: 50%;
margin: -[half of offset height]px 0 0 -[half of offset width]px;
}
Hurix's answer works too, and bear in mind the caveats in that answer as well.
Keep margin-left:auto and margin-right:auto