I try to position a div relative to its parent with a negative top value. This works fine, the problem is now that this div, even it has a negative top value makes the parent div bigger.
What could I do to make the parent div not bigger?
Here's a fiddle.
I do not want that the .innera-rel div makes the .a div bigger (I dont want to see the red at the bottom).
HTML:
<div class="a">
<div class="innera">
blah blah blah
</div>
<div class="innera-rel">
test
</div>
</div>
CSS:
.a {
background: red;
}
.innera {
height: 80px;
background: blue;
}
.innera-rel {
border: 1px solid gray;
background: white;
position: relative;
z-index: 100;
right: -50px;
top: -38px;
width: 130px;
}
The red space you see is the space that the .innera-rel would take up if it was not positioned. This space stays "occupied", you just move the div around relative to that space. If you do not want this to happen you have to use absolute positioning.
Just give the same height to the .a
.a {
background: red;
height: 80px;
}
.innera {
height: 80px;
background: blue;
}
.innera-rel {
border: 1px solid gray;
background: white;
position: relative;
z-index: 100;
right: -50px;
top: -38px;
width: 130px;
}
}
<div class="a">
<div class="innera">
blah blah blah
</div>
<div class="innera-rel">
test
</div>
</div>
.a {
background: red;
height:80px;
}
.innera {
height: 80px;
background: blue;
}
Make the .a height same as the .innera height
This will make the red bar disappear:
.a {
display: inline;
}
Related
I have a context of 3 divs, one parent, and two children.
The two children are placed one on top of the other and I want to add a margin-top on the bottom one to move the one on top 50px up.
What ends up happening is that the one on the bottom moves down 50px instead.
Here is the code:
.container {
background-color: red;
width: 500px;
height: 300px;
position: relative;
margin: auto;
font-size: 30px;
}
.top,
.bottom {
height: 100px;
width: 100px;
}
.top {
background-color: purple;
}
.bottom {
margin-top: 50px;
background-color: blue;
}
<body>
<div class="container">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
Any suggestions?
CSS allows you to move an element relative to its position without affecting other elements' positions if you use transform.
In this case you can translate the top element in the Y direction by -50px to move it up:
.container {
background-color: red;
width: 500px;
height: 300px;
position: relative;
margin: auto;
font-size: 30px;
}
.top,
.bottom {
height: 100px;
width: 100px;
}
.top {
background-color: purple;
transform: translateY(-50px);
}
.bottom {
background-color: blue;
}
<body>
<div class="container">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
gap (grid-gap) Syntax
gap: 50px;
As you can see the first element is already on the highest point inside the parent container.
html
What you can do is in case you want to increase its height is scaling its y position by a negative number.
This question already has an answer here:
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Closed last year.
Here is the first example. This works fine. Here .b occupies 50% of the height of .a.
.a {
background: orange;
height: 200px;
padding: 10px;
}
.b {
background: lightblue;
border: 5px solid blue;
height: 50%;
}
<div class="a">
<div class="b">
</div>
</div>
Here is the second example. It is pretty much the same except that min-height is used to set the height of .a instead of using height.
.a {
background: orange;
min-height: 200px;
padding: 10px;
}
.b {
background: lightblue;
border: 5px solid blue;
height: 50%;
}
<div class="a">
<div class="b">
</div>
</div>
But in this second example, the blue box almost vanishes. It is not 50% the height of .a anymore. Why does this issue happen? How to fix it while using min-height for .a?
Incredible I had never seen this case actually, the tricks I would see would be:
.a {
position: relative;
background: orange;
min-height: 200px;
padding: 10px;
}
.b {
position: absolute;
width: calc(100% - 10px);
border: 5px solid blue;
top: 0;
left: 0;
background: lightblue;
height: 50%;
}
<div class="a">
<div class="b">
</div>
</div>
I have 2 div's, one after the other. When i move first div with postion: relative and top: -60px it creates gap between them.
Here is example: https://codepen.io/dusannis/pen/oNgBpoK
As you can see there is gap between red and yellow div. Is there some css property that I can add to parent div that can remove this gap, or something simillar?
This is HTML:
<body>
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
</body>
This is CSS:
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
position: relative;
top: -50px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
Use negative margin instead of relative positioning.
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
/* position: relative; --> not required */
margin-top: -50px;
/* change this */
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
Codepen Demo of the effects of various methods of "moving" elements:
"Relative Position vs Margin vs Transform".
You can try add same top/position to the second div:
.div-1 {
padding: 60px;
position: relative;
top: -60px;
background: red;
}
.div-2 {
position: relative;
top: -60px;
height: 50px;
background: yellow;
}
Alternatively you can add internal div and use padding for that one, then get rid of padding for the parent and the body (or adjust to the real value if you want it):
<body>
<div class="container">
<div class="div-1">
<div class="div-1-inside">
something here
</div>
</div>
<div class="div-2"></div>
</div>
</body>
body {
background: blue;
padding: 10px;
}
.div-1 {
position: relative;
background: red;
}
.div-1-inside {
padding: 60px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.
Here is the HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
</div>
and the CSS:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
float: left;
}
#b {
background: green;
float: right;
}
Here is the JsFiddle: http://jsfiddle.net/mPH4H/
I should see a red frame, but there is none.
The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:
#frm {
background: red;
width: 100%;
height: auto;
overflow:auto;
}
jsFiddle example
overflow:hidden; will give height to #frm
Try:
#frm {
background: red;
width: 100%;
height: auto;
overflow:hidden;
}
DEMO here.
OR
Clear floats:
HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
i think this is worked as fine:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
width: 50%;
float: left;
}
#b {
background: green;
width: 50%;
float: right;
}