Last Updated
Viewed 55 Times

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.

visualisation of the issue



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>

Similar Question 1 : How to move div down or up ?

I have two divs, top div has style as follows:

.context_left {

while that the div below it has style:

  .footer {
        position: absolute;

when the div context_left changes it's height the div footer remains at it's position, I want to move the footer div down if context_left div changes it's height. Can anyone please help me to do it?

Similar Question 2 : How to move an image up in a div?

I have a semi complicated website, and tucked inside a bunch of <div> is an image, I need that image to be moved up x number of pixels. I have the overflow hidden, so that it will cut the image off at the bottom (as expected) but I can't get the image to move where I want it to with the width maintaining 100%, and the image coming from the bottom

Here is a jsfiddle of the code

#DIV_8 {
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    height: 200px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;

    overflow: hidden;

#DIV_9 {
    max-height: 250px;
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

I am creating a form where i have many child forms to submit,so i have used a jQuery functionality where each submit a msg will show at the top of the page ,now what i want,on each submit the page will scroll up to the div where that jQuery is calling .Here is my code

 var url = "<%=addPersonalDetailsURL%>";    
 var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
 jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {

            $('html, body').animate({
                scrollTop: $(".success").offset().top
            }, 800);

        for(var z=0; z<data.applicationArray.length;z++){

            applicationArray = data.applicationArray[z].split("$$##$$##");

            address1 = applicationArray[0];
            address2 = applicationArray[1];
            city = applicationArray[2];
            primaryPhone = applicationArray[3];


jQuery.getJSON is giving some result where on the basis i have to use that functionality.So can you tell how i should modify your solution

Similar Question 5 (1 solutions) : how to move last div down when sub menu comes up

Similar Question 6 (2 solutions) : How to move my div element up with hover effect

Similar Question 7 (4 solutions) : How to move a div up and down infinitely in CSS3?

Similar Question 8 (1 solutions) : Div Items Move Up on toggle

Similar Question 9 (1 solutions) : On scroll: move up content div