<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
I would expect that the div inside the scroll-able div doesn't show up outside the scroll-able div.
How can I archive this ? The Rectangle should only be visible in the scroll-able div.
you need to reset position, either for the parent or the child : example below
/* CSS here for demo purpose to put both example side by side*/
body {
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-flow:row dense;
}
body>*{grid-column:1;margin:auto;}
body >:nth-child(2) ~ * {grid-column:2;}
<p>position relative on parent,<br><b> so the parent becomes the reference for the absolute child</b></p>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px;position:relative;">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
<p> static position on children<br><b> so it is part of the flow</b></p>
<div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; margin-left: 20px; margin-top: 200px">
</div>
</div>
Absolutely positioned elements Are removed from their parents, and displayed over the DOM. Remove position:absolute; and change your top and left to margin-top and margin-left
.one{
overflow-y: scroll;
overflow-x: scroll;
height: 200px;
width: 200px"
}
.two{
border-color: black;
height: 100px;
width: 30px;
border: 2px;
border-style: solid;
margin-left: 20px;
margin-top: 200px
}
<div class="one">
<div class="two">
</div>
</div>
Add position: relative to the top div
<div style="position: relative; overflow-y: scroll; overflow-x: scroll; height: 200px; width: 200px">
<div style="border-color: black; height: 100px; width: 30px; border: 2px; border-style: solid; position:absolute; left: 20px; top: 200px">
</div>
</div>
Snippet Demo:
.container {
position: relative;
overflow-y: scroll;
overflow-x: scroll;
height: 200px;
width: 200px;
}
.box {
height: 100px;
width: 30px;
position: absolute;
top: 200px;
left: 20px;
border: 2px solid black;
}
<div class="container">
<div class="box">
</div>
</div>
Related
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
A white background can be seen at the bottom of the div, can this be fixed?
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
}
#Aries_pic_1 {
height: 300px;
width: 300px;
inline-size: 100%;
object-fit: cover;
}
<html>
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div> <a href="Aries_page.html" class="Get_1" target="_blank">
<img src="https://cf.ltkcdn.net/horoscopes/images/orig/239601-1600x1030-aries-
constellation.jpg " id="Aries_pic_1">
</a>
</div>
</div>
</html>
As you set up your styles, adding display:block on your img will resolve the issue. Like so :
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
}
#Aries_pic_1 {
height: 300px;
width: 300px;
inline-size: 100%;
object-fit: cover;
display: block; /* line I added */
}
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div>
<a href="Aries_page.html" class="Get_1" target="_blank">
<img
src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
id="Aries_pic_1"
/>
</a>
</div>
</div>
</div>
I would use flex for this.
Seeing as you have appled min-width and min-height on flexbox-item-1, I suspect you want responsive sizing on the image - using fixed values for this will not let you do that.
display: flex on the container element will automatically make the second container div take up the remaining space, as well as the a-element. Applying max-width: 100% makes sure the img never overflows out of the container. Apply height: 100% and object-fit: cover and voila, you got a fully responsive container with an img-element inside.
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
display: flex;
}
#Aries_pic_1 {
max-width: 100%;
height: 100%;
object-fit: cover;
}
<html>
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div>
<a href="Aries_page.html" class="Get_1" target="_blank">
<img src="https://www.fillmurray.com/640/360" id="Aries_pic_1">
</a>
</div>
</div>
</html>
I have 6 s inside a parent
The height of the internal divs change dynamically based on the underlying data.
The outer Div has a set height.
What I want is that when one of the internal Divs no longer fit (heightwise) in the parent that it should just move over to a "new column" inside the parent Div
Here is a short snippet with my situation:
#outer {
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Here is another snippet of how I would want it to appear:
#outer {
float:left;
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
<div id="outer">
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Can anyone suggest anything?
Thanks
Flex wrapping can easily solve this problem.
[If you're using bootstrap, you don't need to write the css written in '*' selector]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#outer {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 90px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
I want the box shadow of a child element only overflow within it's parent element but it goes out of its parent element. How can I fix this?
How it is actually:
How it is expected to be:
#main {
background: #ddd;
height: 200px;
width: 200px;
padding: 50px;
}
#child {
background: #eee;
height: 100px;
width: 100px;
padding: 50px;
}
#grand-child {
background: #fff;
height: 100px;
width: 100px;
box-shadow: 0 0 100px 40px red;
}
<div id="main">
<div id="child">
<div id="grand-child"></div>
</div>
</div>
You simply add overflow: hidden
#main {
background: #ddd;
height: 200px;
width: 200px;
padding: 50px;
overflow: hidden;
}
#child {
background: #eee;
height: 100px;
width: 100px;
padding: 50px;
overflow: hidden;
}
#grand-child {
background: #fff;
height: 100px;
width: 100px;
box-shadow: 0 0 100px 40px red;
}
<div id="main">
<div id="child">
<div id="grand-child"></div>
</div>
</div>
You have to add a CSS property to the #child that overflow: hidden.
I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.
What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
UPDATE
Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.
UPDATE 2
Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
Use position:relative; for content and position:absolute; for options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>