I have this code to show absolute div into relative div.
html:
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="relative">
<div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>
</div>
</div>
<div class="col-md-12">
normal text added
</div>
</div>
</div>
</section>
css:
.relative {
position: relative;
height:auto;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
}
In reality when I set height:auto for relative div this div is not showing. If I set any height value ie: height:150px; relative div it works and shows true. How do I fix this problem ?
demo here
You can't do this with css, and need to set the height on your outer div with position:relative for your inner position:absolute to show.
This is because when you set a <div> to be position:absolute, the outer container no longer has the concept of its width and height and will not accommodate the space it takes up.
add overflow :hidden; min-height:100px;
.relative {
position: relative;
height:auto;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
Here the trick
CSS
.relative {
position: relative;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
overflow: auto;
height: 100px;
}
DEMO
Set the relative height and absolute height
Related
Using the CSS property 'position', how would it be possible to make a div inside another div always 100% height of the parent div, with a margin of 40px on the top and on the bottom? It needs to be adjusting, so that if the parent div is 700px in height, the child div will be 620px (700px - 80px from margins). Here is an example of what I mean:
Here the parent div (green) is tall, so the child (orange) must stretch to fit the space.
And here the parent (green) is squashed, so the child (orange) must compensate by squashing itself to fit.
Thank you in advance.
Edit:
Here is the html Im working with:
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
Try this:
#center-page {
position: relative;
background: green;
height: 700px;
}
#content {
position: absolute;
background: orange;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
}
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
You can try absolute positioning with top and bottom values. Something like this:
#child{
position: absolute;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
background: blue;
}
Here is an example:
https://jsfiddle.net/Lys72mgy/
I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.
Here is my JSfiddle
SF wants some code:
<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>
</div>
An element with position: fixed; ignores the parent size because it is relative only to the viewport:
MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
You can:
Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.
You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:
Edit: I added a min-height to the body to see the "fixed-effect" on scrolling
body {
margin: 0;
min-height: 1000px;
}
#container {
margin: 10px;
background: black;
color: white;
}
#item {
height: 50px;
width: 100%;
}
#item {
background: blue;
}
#fixed {
height: 50px;
width: calc(100% - 20px);
background: green;
position: fixed;
}
<div id="container">
<div id="item">Normal div</div>
<div id="fixed">Fixed div</div>
</div>
I need to resolve this issue on IE7 browser where the parent div's height is not expanding with dynamic content of the child div.
This is my HTML markup:
<div class="parent">
<div class="middle">
<div class="inner">
....
....
....
</div>
</div>
</div>
CSS:
This CSS vertically aligns the text in the middle and is working fine. It's just not expanding the parent div's height. The height of 80px on .parent is important and is set dynamically through PHP and it cannot be changed to percentage or any other value.
.parent { position: relative; width: 100px; height:80px; }
.middle { position: absolute; top: 50%; }
.inner { position: relative; top: -50%; padding:10px 0; width:100px; }
Change inner class position,
false: .inner { position: relative; top: -50%; padding:10px 0; width:100px; }
true : .inner { position: absolute; top: -50%; padding:10px 0; width:100px; }
look this example:
code : http://cdpn.io/nrcKa
full page : http://codepen.io/anon/pen/nrcKa
I have this css:
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
I have this html:
<div id="manipulate" align="center">
</div>
How do we position that div at the bottom center of the screen?!?
If you aren't comfortable with using negative margins, check this out.
HTML -
<div>
Your Text
</div>
CSS -
div {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
Especially useful when you don't know the width of the div.
align="center" has no effect.
Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
Use negative margins:
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
The key here is the width, left and margin-left properties.
Here is a solution with two divs:
HTML:
<div id="footer">
<div id="center">
Text here
</div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
#center {
width: 500px;
margin: 0 auto;
}
Using a Flexbox worked for me:
#manipulate {
position: absolute;
width: 100%;
display: flex;
justify-content: center; // Centers the item
bottom: 10px; // Moves it up a little from the bottom
}
You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;
For example. http://jsfiddle.net/aWNCm/
So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.
100% working single line (Inline CSS Solve)
<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
100% working single line (Inline CSS Solve)
<div style="padding: 20px; width: 100%; text-align: center;">Your Content Here</div>
I have this
<div id="container">
<div id="div1"></div>
<div>
Now, let's assume that:
the "container" has a width of 300px
the "container" has overflow: hidden;
the "div1" has a width of 1000px;
the "div1" is absolute positioned, top:0px,left:0px;
The problem:
The "div1" is not hidden, it overflows the "container" but it's still showing :(.
If I simply remove the "position:absolute" it will work.
How can I hide the overflow of "div1" ?
Add position: relative to container div element.:
Exa:
<style type="text/css">
#container
{
width: 200px;
background-color: red;
height: 60px;
color: white;
position: relative;
overflow: hidden;
}
#div1
{
background-color: blue;
position: absolute;
top:0px;
left:0px;
width: 300px;
}
</style>
<div id="container">
<div id="div1">This is div1</div>
<div>
adding
#container { position: relative; }
will hide the overflow.
Adding position absolute to an element will remove that element from the normal flow.
It will position itself absolute to the closest parent that is relatively positioned.
This is why adding "position:relative" to the "container" will achieve the desired effect.