I thought adding margin to an element in position: absolute does not work.
In the following snippet, #child2in #parent2 is in position: absolute and yet adding margin: 10px seems to work as #child2 seems to be in alignment with #child1, which does not have position: absolute
Why is this happening or what am I getting wrong about margin and position: absolute of elements ?
#root{
display:flex;
gap: 10px;
}
#parent1{
border: 1px solid #000;
position: relative;
width: 100px;
height:100px;
}
#child1{
background:hotpink;
width: 70px;
height: 70px;
margin: 10px;
}
#parent2{
border: 1px solid #000;
position: relative;
width: 100px;
height:100px;
}
#child2{
background:cyan;
width: 70px;
height: 70px;
position: absolute;
margin: 10px; /* <-- Why does margin work here */
}
<div id='root'>
<div id="parent1">
<div id="child1">no absolute</div>
</div>
<div id="parent2">
<div id="child2">absolute</div>
</div>
</div>
Related
I am gonna to copy paste all the code, so you can check everything and understand what it's the problem. Thank you.
I just wanted to make it appear under the previously div. Just like it shoud be, because this problems not only appears with this div, but with everything else.
.presentazione
{
position: relative;
top: 100px;
width:auto;
height:auto;
text-align: center;
font-size:30px;
border: 2px solid red;
}
.sottofondo
{
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio
{
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona
{
position: relative;
width: auto;
height: auto;
border:1px solid pink;
}
.preview
{
position: relative;
width: auto;
height: auto;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your problem if I understood correctly is that you have on your presentazione element the top property which this makes the element to move 100px from the top of the page without pushing the other elements.
If you want it to have a 100px distance from top better use margin-top: 100px.
I removed the top property from that class and it seems to be correct. Check it out below:
.presentazione {
position: relative;
width: auto;
height: auto;
margin-top: 100px; /* changed from top to margin-top */
text-align: center;
font-size: 30px;
border: 2px solid red;
}
.sottofondo {
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio {
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona {
position: relative;
width: auto;
height: auto;
border: 1px solid pink;
}
.preview {
position: relative;
width: 200px;
height: 200px;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your .presentazione div's position is set to relative and its top:100px, so other elements are behaving like its still in its original position, therefore you see that overlap, you can try margin-top:100px instead of top:100px and it will work.
more info on relative positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
I am trying to place a box along side each image on my webpage that will scroll down with the page but only inside the confines of the post/image, like can be found at memecenter, but i am having some difficulties.
I have set the parent div (post) to position relative and the child div (scrolling box) to position absolute, and they are nested within each other in the html but the child div wont scroll it still stays static on the page.
See code here:
.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
}
and html:
<div class="parent">
<div class="child">
</div>
</div>
You can use "top" and "left" values.
Css Part:
.parent {
position.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
left: 100px;
top: 10px;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
float: left;
}:
Html part:
<div class="parent">
<img src="img.png" width="100px">
<div class="child">This is image description</div>
</div>
Css :
.parent
{
background-color:Blue;
position:fixed;
width: 150px;
height:200px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow:hidden;
}
.child {
background-color:red;
position: absolute;
width: 460px;
height: 220px;
float: right;
margin-left:150px;
overflow:scroll;
}
and html:
<div class="parent">
</div>
<div class="child">
</div>
Please find a working fiddle.
http://jsfiddle.net/Victor_AJ/8GS7b/13/
CSS :
.parent {
background-color:Blue;
position:fixed;
width: 70%;
height:100%;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow-y:scroll;
overflow-x:hidden;
}
.child {
background-color:Grey;
position: absolute;
width: 30%;
height:100%;
float: right;
margin-left:70%;
overflow:hidden;
}
And Html :
<div class="parent">
</div>
<div class="child">
</div>
Find a Fiddle Here Working EX
I'm trying to create a progress bar and i have a problem aligning div inside a div.
css:
.outer {
width: 20px;
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display:inline-block;
}
.inner {
width: 100%;
overflow: hidden;
position: absolute;
border-top-width: 0;
background-image: url('/images/progressBar2Red.png');
background-size: 20px;
bottom: 0;
height: 0%;
display:inline-block;
}
.progress{
display: inline-block;
align-items:center;
}
html:
<div class="progress">
<label class="progNum">20</label><br />
<div class="outer">
<div class="inner"></div>
</div>
</div>
For some reason the inner div is not exactly in the middle of the outer div. This is how it looks:
How can i put the inner div exactly in the middle of the outer div?
You made this .inner element of position: absolute. Just add left: 0; and right: 0; to the .inner CSS rules.
Divs are of 100% width by default, never set a div to a 100% width unless you absolutely need it... for some reason.
EDIT
Ok I actually do not understand what DOES NOT work for you. Check this JSFiddle. I think the problem is your background.
Give the inner margin: 0 auto;
JSfiddle Demo
HTML
<div class="progress">
<label class="progNum">20</label>
<div class="outer">
<div class="inner"></div>
</div>
</div>
CSS
.outer {
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
border-radius: 4px;
}
.inner {
width: 100%;
position: absolute;
border-top-width: 0;
background-color: red;
bottom: 0;
width: 100%;
height:20px; /* or anything else you want */
border-radius: 4px;
}
.progress{
display: inline-block;
width: 20px; /* sets width of the whole bar - everything else can be 100% */
}
.progNum {
text-align: center;
display: block;
}
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}