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.
Related
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 am currently transitioning the width property of an element. I would like to replace this with transitions on scaleX and translateX for better rendering performance.
I'm struggling to come up with a proper 1:1 conversion between the two concepts.
Below is a box which contains two lines. Each line has a bar inside of it. The first bar is created using width. The second bar is created using scaleX and translateX. The second bar breaks out of the box. It should appear identical to the width bar for all possible values.
Is this an appropriate way to tackle this problem? If not, how should I approach it? If so, I have some concerns:
I feel like I shouldn't have to use 1% width. I thought I could say 1px and scale that, but maybe that isn't the right idea.
I'm unclear if I should use 1% width and scale up, or 100% width and scale down. Perhaps they're equivalent, but the width of the bar controls the positioning of translateX
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6) translateX(33%);
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>
It's simpler than all that. You're already scaling the element to 66%. Now all you need to do is set the origin to the far left of the element with transform-origin: 0 50%; and drop the translate rule. That should fix the issue.
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6);
transform-origin: 0 50%;
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>
In the following html/css code:
<div class="blue">
<div class="red">
<div class="yellow">
1
</div>
<div class="yellow">
2
</div>
</div>
</div>
.blue { background-color: blue; height: 150px; width: 100px; margin: 100px; }
.red { background-color: red; height: 100px; width: 500px; margin-left: -50px; }
.yellow { background-color: yellow; height: 50px; }
I need to give .yellow the same width as .blue, but without using fixed px (as .blue is responsive and can change it's width) and without using position: absolute; as the two yellow must not overlap.
Expected result: http://jsfiddle.net/kPg97/3/
This doesn't work as it uses fixed px:
.yellow { width: 100px; float: left; }
This doesn't work as the first .yellow isn't visible:
.yellow { position: absolute; width: 100%; left: 0px; }
Probably with jquery, you can do like this :
$(document).ready(function(){
var width = $(".blue").width();
$(".yellow").width(width);
});
You can do without jquery, you may have understood though.
Please note a display:inline; and float:left were used. Hope they won't conflict with your interest.
Jsfiddle here
I've searched and tried a bunch of different things. I have a variable-height tophalf, and the bottom half should fill up the remaining space. A JSfiddle:
http://jsfiddle.net/UCJmQ/
CSS:
.top {
background-color: lightblue;
height: 300px;
}
.bottom {
background-color: green;
min-height: 100px;
overflow: hidden;
height: 100%;
}
html, body {
height: 100%;
}
HTML:
<div class="top"></div>
<div class="bottom">
</div>
What I'm seeing now is the green page taking up the entire window's height, not the remaining height. How can I make it take the remaining height instead?
http://jsfiddle.net/ph35V/
<div class="wrapper">
<div class="top">
300px
</div>
<div class="bottom">
Remaining height
</div>
</div>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
}
.top {
display: table-row;
background: lightblue;
height: 300px;
}
.bottom {
display: table-row;
height: 100%;
background: green;
}
Could also use box-sizing: border-box or conflicting absolute positions
Is that variable-height specified in CSS or not?
From the fiddle I assume it is. If that's the case, try position: absolute with left, bottom, right set to 0 and top to upper div height:
DEMO