the child's height is more than it's parent div. Do we have some trick for this? or alternative solution.
i just simplified the codes. i also have codepen here
you see it in the codepen that the child is overlapping to footer. I want the footer to go below the child.
html
<div class="wrapper">
<div id="sibling-1">
<div class="child"></div>
</div>
<footer id="sibling-2"></footer>
</div>
css
.wrapper {
height: 500px;
background: pink;
}
#sibling-1 {
background: grey;
height: 200px;
width: 300px;
position: relative;
}
.child {
position: absolute;
background: green;
width: 250px;
height: 300px;
}
#sibling-2 {
width: 300px;
height: 200px;
background: blue;
}
Related
Is it possible to make a div absolute to a specific relative div rather than just the parent?
For example. I have a div that's contained inside of a row. But, I want it to be absolute in the section rather than the row. Both divs are positioned relative because of a WordPress themes styling. If I use position absolute it will just make it absolute to the row.
How can I get around this issue?
.section {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
right: 0;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
This is not how positioning works. A div or any other element is relevant to its parent regarding its positioning. In case you want to position an element inside the section that you have, it's better to construct your code as follows:
<div class="section">
<div class="absoluteDiv">
</div>
<div class="row">
</div>
</div>
You could find some more examples here
Hope it helps,
Konstantinos.
Although you can not make a div absolute to a specific div, one way to get the results you are looking for is to add overflow:visible; to the row and left:100%; to content container. I changed the section height to 300px for demonstration purposes but it will behave the same with 100%.
.section {
width: 100%;
height: 300px;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
overflow:visible;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 100%;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
In Chrome 60.0.3112.90(64-bit).
My system is macOS 10.12.4
As you can see, the blue box is overflow. How can I solve this problem? And why does it overflow?
Please check this JSFiddle
or this is my code.
.outer {
width: 200px;
height: 200px;
border-radius: 10px;
border: 1px solid black;
position: absolute;
overflow: hidden;
}
.inner {
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
background-color: lightblue;
}
.inner2 {
width: 200px;
height: 400px;
background-color: lightgray;
}
.inner3 {
width: 200px;
height: 100px;
position: absolute;
background-color: blue;
}
<div class="outer">
<div class="inner">
<div class="inner2">
<div class="inner3"></div>
</div>
</div>
</div>
You can apply z-index: 1 to .outer CSS class.
You can also try this solution, it's used a lot by other guys.
You have here a working demo
#container {
width: 200px;
height: 200px;
background:red;
overflow: auto;
position: relative;
}
#absolute {
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 20px;
background: yellow;
}
<header>Header</header>
<div id="container">
<div id="absolute"></div>
</div>
<footer>Footer</footer>
I have an absolute positioned yellow bar here that is wider than the parent box. I'd like the full bar to be visible and not be clipped by the parent dimensions. Is it possible to do that using some combination of CSS properties?
I'm aware that removing overflow:auto from the parent gives the effect I am asking for but removing that is not an option, unfortunately.
I added another wrapper that has the overflow: auto; and removed it from the main container
#container {
width: 200px;
height: 200px;
background: red;
position: relative;
}
.subcon {
overflow: auto;
}
#absolute {
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 20px;
background: yellow;
}
<header>Header</header>
<div id="container">
<div class="subcon">
<div id="absolute"></div>
</div>
</div>
<footer>Footer</footer>
<header>Header</header>
<div id="container">
I have an absolute positioned yellow bar here that is wider than the parent box. I'd like the full bar to be visible and not be clipped by the parent dimensions. Is it possible to do that using some combination of CSS properties?
I'm aware that removing overflow:auto from the parent gives the effect I am asking for but removing that is not an option, unfortunately.
<div id="absolute"></div>
</div>
<footer>Footer</footer>
#container {
width: 200px;
height: 200px;
background:red;
overflow: auto;
}
#absolute {
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 20px;
background: yellow;
}
I'm using particles.js and am trying to fill a relative section with the absolutely positioned particle content.
The problem I'm having is that the height of the relative section is dynamic and I can't seem to get the the absolutely positioned inner div to only fill the relative container.
Been searching and trying various things but haven't found any solutions. Here is a jsfiddle showing the issue: http://jsfiddle.net/awwester/3f6vkef7/1/
<div class="container">
<div class="inner">
</div>
</div>
.container {
height: 200px;
background-color: red;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
}
and I can't seem to get the the absolutely positioned inner div to only fill the relative container.
The key is adding the property position: relative to your container.
Try the following example:
.container {
height: 200px;
background-color: red;
position: relative;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner">
</div>
</div>
you forgot to set position: relative; on .container so .inner apply to body/html
.container {
height: 200px;
background-color: red;
position: relative;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
}
<div class="container">
<div class="inner">
</div>
</div>
I have 2 divs with min-height . The first one has a top property of 470px. I want the second div to display staright underneath the first div without any space between. I have also tried display: block and putting the divs into a table, neither of which worked any better. Here is te css:
#content {
width: 100%;
position: absolute;
top: 470px;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
position:;
top:;
background: #333333;
min-height: 100px;
overflow: hidden;
}
HTML:
<div id="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div id="content2">
<p>texttexttexttexttext</p>
</div>
Once you absolutely position an element you take it out of the document flow so you can't really have something come right after it unless you absolutely position it as well. I changed it to just use a top margin to put it where you want it. If you need elements in that top 470px then you can absolutely position those elements.
And the borders I put in are for illustration only.
#content {
border: 1px solid red;
margin-top: 470px;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
border: 1px solid blue;
background: #333333;
min-height: 100px;
overflow: hidden;
}
<div id="content">First DIV</div>
<div id="content2">Second DIV</div>
Because #content is positioned absolutely, you cannot do this without changing the HTML structure.
You can add a container element to the divs which is positioned absolutely with the same top as of #content1 and add the two divs inside the container without position.
#container {
width: 100%;
position: absolute;
top: 470px;
}
#content {
border: 1px solid red;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
background: #333333;
min-height: 100px;
overflow: hidden;
}
<div id="container">
<div id="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div id="content2">
<p>texttexttexttexttext</p>
</div>
</div>
You haven't posted your HTML, but this is my wild guess.
Try this:
<style>
#content {
width: 100%;
position: relative;
background: yellow;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
position: relative;
background: blue;
min-height: 100px;
overflow: hidden;
}
</style>
<div id = "content">
<p> Content - 1 </p>
</div>
<div id = "content2">
<p> Content - 2 </p>
</div>