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 */
}
Related
I have a css animation, which makes a div go under another div. DIV 1 goes under DIV 2. If I make DIV 2 absolutely positioned, the page will break in pieces. But if I don't make the DIV 2 absolutely positioned, the DIV 1 will not go under it, buy stay at the top of the div.
You can check it out live here
This is how it looks without making the right content absolutely positioned.
If you hover your mouse over the map, you will see the transition.
Any helpful solutions of getting rid of this? I would really appreciate.
Thanks in advance.
That is why it don't work, your parent div has to have position to child div position take effect.
.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}
Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Make Div 2 be position: relative so that it stays in the flow. See How to make div's percentage width relative to parent div and not viewport
From that answer:
Specifying position:relative; or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
I managed to make it work:
#content {
position: relative;
}
.info {
z-index: 0;
position: relative;
}
To make the #content to be the top layer add z-index with a higher value with the other div.
Take note, z-index doesn't work if you don't set your div position:absolute or position: relative
#content {
position: relative;
z-index: 3;
}
What I want: Stick text or an element to the right of the document, instead of window.
However, without currently implementation (position: absolute; right:0;), when I resize the window, the text always stay on the right side of the window, even there is a scrollbar showing up (because the element on the top of that has a fixed width). When I scroll right, the text is not right aligned any more.
Here is the example:
http://jsfiddle.net/N5jc9/
Note that, I have no control on container1. Anyone having a good solution for this using CSS?
Put container 2 inside container 1 and make container 1's position relative.
You can use the :after pseudo element and position it to the right of your <body> element. This of course will be evident only if you have set a fixed/min width for your <body> element.
Demo: http://jsfiddle.net/PPtD5/2/
Code:
body {
width: 70%;
height: 200px;
position: relative;
}
body::after {
content: "This one sticks to the right of <body>";
width: 100px;
position: absolute;
right: -120px;
top: 0;
}
Not sure if I understand completely what control you have for container1, but if you apply display:inline-block to each class the text will appear to the right of the container 1
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
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;
I am using the yui-grids css (irrelevant if you don't know what this is) with three columns. and I'm putting all the fancy design stuff on the left column and using z-index and relative psitioning bringing them in the center. and then putting all the important stuff like forms, inputs buttons, links and context in the center. Is this wrong. I've never seen this done so I was wondering maybe there is something I don't know! or am not considering. Should I just use one column?
I'm not totally sure what you're asking, so I'll give it a shot:
Columns
If you're going with a column layout, you should give just floating elements a go. Due to how floating works, a clearfix hack will be nessecary (link provided below). Clearfix allows child elements to be floated while maintaining the parent element's height and block nature. Clearfix can only be added to block elements.
For my example, we will be going with a 2 column layout -- one #content column and a #sidebar column -- you could do two, three or more.
For the parent div (that contains the #content and #sidebar elements), you'll need to add a class="clearfix".
For the content div, you'll want to float it to the left. For the sidebar div, you'll want to float it to the right.
Now, the CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
This should produce a 750px box with a content element on the left and a sidebar on the right with 50px in between both elements (750-(500+200) = 50).
Floating Module
If this isn't what you wanted, and were looking to produce a module element (lightbox, popup window, etc) instead, this is easy too.
First, create a div called #module. Put in your content into it. Let's say you want to give it a width of 500px and you want the height to be static at 300px. So we'd do this CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
What's going on here?
The #module element is being set to position: absolute. This means that it will be floating around the window, and is not constrained to it's parent element. We position it to be 50% from the left of the window and 50% from the top, so it gets in the middle of the window. Percent values are nessecary as they are adjusted when the window resizes. Without the margin, the element's top left corner will be 50% from the top and 50% from the left, so we need to use margin to move it back half of it's width and half it's height. This will allow us to have a box perfectly centered in the middle. The z-index is added to make sure that the element is on top of any other element, including , and other positioned elements.
I hope this helps.
Links
Clearfix: http://gist.github.com/550114
This kind of layout wouldn't be correct in my opinion.
The design of an element must be described in that particular element.