Question

I have an application that opens up several windows. The content is dynamically created by the DOM with jQuery, but the classes are static.

The problem is that the bottom div sticks at the bottom of the top div, instead of the bottom (see illustration below).

Is there something obviously i’m missing here?

.containerDiv {
    position: absolute;
    left:50px;
    top: 60px;
    margin-left: auto;
    margin-right: auto;
    resize: both;
    overflow: auto;
}

.topDiv {
    position: relative;
    top: 0;
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.middlediv {
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
}

.bottomDiv {
    position: relative;
    bottom: 0;
}

This is how it looks:

--------------------
      topDiv
--------------------
     bottomDiv
--------------------


     middleDiv


--------------------

Answer 1

Change position:relative to position:absolute in the bottom div’s CSS. That’s the only way bottom:0 can work.