I want to display content - other divs containing text - in a div on my website.
The div is a child of a flexbox.
Sometimes, this content is bigger than the size of my div.
But this is not a problem, as I only want the stuff at the bottom-right corner of the content to be visible anyway.
What I do is use the property overflow: hidden;. But this lets the content overflow to the right and bottom instead of the left and top.
What I have:
What I want:
I tried:
using overflow: scroll; and scrolling to the maximum, but this broke my layout.
using direction: rtl;, but this reverses the direction of my text instead of the overflow.
using float: right;, which doesn't do anything.
Do you have any suggestions for what I could try?
Thanks!
I need the CSS and HTML code to give you a precise answer, but I think that you can solve the issue by giving:
position: relative;
overflow: hidden;
to the parent and:
position: absolute;
bottom: 0;
right:0;
to the child element.
Related
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
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 */
}
I have a parent container that has overflow:scroll while a child of it needs to be shown anyways like overflow: visible.
How to solve that?
Thats an easy one:
give your parent
position: relative;
your child
position: fixed;
use margin to change the position
Dont use top, bottom etc.
I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).
When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.
How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?
Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/
You'll want to use the white-space CSS property to the div and give it a nowrap value.
Show in this jsFiddle. (Your original, plus I added the overflow-y property.)
CSS used:
div {
height: 120px;
background: #666;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
I think you are trying to Float all the images in the left.
In css use Postion Absolute for all images and then Float all the images to the left.
Something like
float:left;
position: absolute;
use these on the img tag
this is off the top of my head has not tried it yet. So sorry if I am wrong.
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;