I've got a project where I need to top-right align a div so that it sits on top of an existing variable-width td.
What has me stumped is the variable width aspect. I can get the div to sit on top of the existing relatively positioned td by using fixed positioning for the div. However, because the TD width can change I can't set a "left:" value for the div.
I've created a fiddle to demonstrate it with left aligned in the td, now I just need to get it to right align:
jsfiddle.net/ErDr6/36/
I've looked at some other posts, but they seem to deal with fixed width elements:
Align div with fixed position on the right side
Firstly, change position: fixed; to position: absolute; so that the arrows won't stay fixed relative to the viewport when the page scrolls. Then, add the following:
#col_arrow {
right: 0;
}
.wc-day-column-header {
position: relative;
}
That will align the arrow to the right of its parent. We add position: relative; to the parent to restrict it to that container.
If it needs to be dynamic then absolute position can be calculated as:
theTD.offsetLeft+theTD.offsetWidth-arrow.offsetWidth
Related
I have one element (a div) floating to the right of content, and below the content (which can be varying in height) I have another div that I want to stack above the floated right div, but stay below the content.
Here's an example: https://jsfiddle.net/8nap0qm6/
While this is close, I need the content within the ".over" div to not wrap when it hits that right-hand div, but instead fill up the whole ".over" div while still overlapping the right-hand div.
Putting a "clear: both/left" on the ".over" div pushes the div below the right-hand div instead of overlapping it.
I know I could absolute position the over div:
.over {
position: absolute;
top: 200px; // or xx%
left: 0px;
z-index: 5;
}
but I need it to be vertically controlled by the content so I can't put a set "top" on it.
Is there a way to achieve this? (Make white text in blue box go full width of blue box.) I'm open to using completely different code if necessary.
You just need to set position: absolute;
.over {
position: absolute;
z-index: 5;
}
JSFiddle
As the given answers don't seem to satisfy exactly what's expected, I decided to change some things to make the output closer to what you expect. Check my fiddle.
Major changes:
1) Added a #parent div to wrap the whole content
2) Absolutely positioned the .right div, relative to #parent
3) Added width to .right and all #parent's p elements so that summing both results in 100%
Just add clear: both; to your .over class:
.over{
clear: both;
/* your properties */
}
<div id="someid">some text here</div>
css...
#someid{position: fixed; width: 500px; height: 30px;}
I want to position absolutely center to horizontal and vertical to window?
#someid{
position:
fixed;
width: 500px;
height: 30px;
right:50%;
margin-right:-250px;
}
The negative margin is to fix the offset that occurs when the browser will consider the div's right side to be 50% from the right of the browser window.
To center it vertically, you may want to try the same thing (no guarantees here though as I haven't done this before) with its vertical position.
For example:
top:50%;
margin-top:-15px;
Edit
A little more thorough explanation: When #someid is placed 50% from the right it is positioned so that it is 50% of its parent's total width away from the parent's right border. This however, doesn't measure from the center of #someid to the right border of its parent element, it measures from the right side of #someid to the right side of its parent element. This of course, doesn't quite center #someid, it's still offset by half of its width.
This is why we use a negative margin to offset it. The negative margin needs to be half of #someid's width to make up for the offset to the left that occures when we place it by it's right side 50% from the right of its parent element.
While your position is fixed you cannot position the div relatively. You must calculate the top and left values by javascript. You can center its position horizontally by writing this:
width: #SOMEWIDTH#px;
margin: 0 auto;
To make the margin position the div at the center the width attribute MUST be set.
Auto margining does not affect vertical postiion.
I want to fade out the top and bottom of two separate divs.
Right now I'm trying to use position:absolute and top:1px on the top one and bottom: 1px on the bottom one. Was not working for me, uses the parent div? Which was causing them to show up in the wrong places.
This fiddle shows where I am:
http://jsfiddle.net/mstefanko/23mfk/
What I want is for the top and bottom of each div to have the fade demonstrated in the fiddle.
Your .inner-1 and .inner-2 both have absolutely positioned elements within them. These elements are being positioned in relation to the viewport, and not their parent. You'll need to set .inner-1 and .inner-2 to a relative position:
.inner-1,
.inner-2 {
position: relative;
}
This will cause the gradient elements to appear at the top and bottom of these containers.
Demo: http://jsfiddle.net/23mfk/1/
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;
the div with the word test it in, just will not go up the top right..... despite me floating right and specifying top 0
http://www.e-fluential.com/offline/
HELP!!
Thanks in advance
You should give the element the following properties:
position: absolute;
top: 0;
right: 0;
This will make the element go to the top right corner. If you want the element to go to the top right corner of its parent you should give the parent the following property:
position: relative;
This will position the element relative to its parent.
Another solution would be to wrap the elements on the left with a wrapper, which you will then need to give a width and a float: left;, do the same with the elements that should go right but instead of floating it left give it a float: right;. The total width of both wrappers should not extend the width of the parent.
You'll probably want to go with the second solution because you don't need to give your elements absolute coordinates that way.
Positioning elements
Floating elements