How to move multiple <div> up? - html

Question

I have three divs. The first one (A) has a width and a heigth of 100%. The next (B) has a width of 80% and a height which is variable and solely determined by its content. I want to position B on A's bottom line, such that B's middle point is aligned with A's. I managed to accomplish this using transform: translateY(-50%);.
However, the following div (C, also variable height) does not follow (B) and leaves a huge gap, which I want to get rid of.
Do you have any ideas how to close the gap? The difficulty is that it is impossible to know B's height in advance.
Thanks!
Herberth
You can use this HTML file:
#a {
background: #6671ff;
height: 100px;
}
#b {
background: #f171ff;
width: 80%;
height: 80px;
transform: translateY(-50%);
}
#c {
background: #663699;
height: 200px;
}
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

Answer 1

You can use the following jQuery code to get the height of #b and then divide it by -2 (= half, but negative value) and apply that as a negative margin-top to #b:
var height_of_b = $('#b').outerHeight();
var offset = height_of_b / -2;
$('#b').css('margin-top', offset);
#a {
background: #6671ff;
height: 100px;
}
#b {
background: #f171ff;
width: 80%;
height: 80px;
position: relative;
}
#c {
background: #663699;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

Answer 2

var b = document.getElementById("b");
var c = document.getElementById("c");
c.style.top = (-(b.offsetHeight / 2)) + "px";
#a {
background: #6671ff;
height: 200px;
position: relative;
}
#b {
background: #f171ff;
width: 80%;
height: 180px;
transform: translateY(-50%);
border: 3px solid aqua;
padding: 10px;
}
#c {
background: #663699;
height: 200px;
position: relative;
}
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
If you're alright using some javascript, this gets the job done with 3 lines of javascript and some additional CSS. It also accounts for any padding or borders you place on Element #b, so I thought it would be useful in case you were going to add some additional styling onto that middle element. It works with any height that the middle element is set to, and also does not depend on the height of either the top or bottom elements.
My method uses a combination of CSS' position: relative and javascript's offsetHeight to work. Basically, it gets the height of element B through javascript (and this will get whatever the height is, including padding, border, and any size changes caused by the element's inner content) and then divides it by two in order to get half of the height of element B. Then, it moves the top of element C back by that calculated amount of pixels.
It also doesn't need any Jquery.
Try out the code snippet, it works. Hope this helps!

Answer 3

if you can modify the markup, depending on your use-case you can do something like this:
#a {
border:1px dashed #6671ff;
height: 100px;
position: relative;
}
#b {
border:1px dashed #f171ff;
width: 80%;
height: 80px;
margin: 0 auto;
}
#c {
border:1px dashed orange;
height: 200px;
}
#bc {
position: absolute;
top: 50%;
left: 0;
width: 100%;
z-index: 1;
}
body {
padding: 20px;
}
<div id="a">
A
<div id="bc">
<div id="b">B</div>
<div id="c">C</div>
</div>
</div>

Answer 4

You can use Javascript to add a listener to the second box's size changes. Every time it changes, calculate half of it's new height and set the transform property of the third box accordingly.
const secondBox = document.querySelector('.box2');
const thirdBox = document.querySelector('.box3');
function outputsize() {
const transformHeight = secondBox.offsetHeight / 2;
thirdBox.style.transform = `translateY(-${transformHeight}px)`;
}
outputsize()
new ResizeObserver(outputsize).observe(secondBox)
* {
margin: 0;
}
.box {
width: 200px;
}
.box1 {
height: 200px;
background: blue;
}
.box2 {
transform: translateY(-50%);
background: pink;
opacity: .5;
}
.box3 {
background: purple;
height: 50px;
}
<div class="box box1"></div>
<div class="box box2">
<p>dummydata</p>
<p>dummydata</p>
<p>dummydata</p>
<p>dummydata</p>
<p>dummydata</p>
<p>dummydata</p>
<p>dummydata</p>
</div>
<div class="box box3"></div>
Please note: the ResizeObserver api isn't supported in all browsers yet. You can get more info on the matter here.

Answer 5

Here is an HTML/CSS only version. I modified it with keeping the heights dynamic using by setting position: absolute; and transform: translateY(50%); on div B inside the position: relative; div A.
#a {
background: #6671ff;
height: 100px;
margin-bottom: 50px;
position: relative;
}
#b {
background: #f171ff;
width: 80%;
height: 80px;
position: absolute;
transform: translateY(50%);
}
#c {
background: #663699;
height: 200px;
}
<div id="wrapper">
<div id="a">
A
<div id="b">B</div>
</div>
<div id="c">C</div>
</div>