Question

I try to create a div with other divs inside: one container div, one div at the top and one div at the bottom. I have a problem with CSS positioning that I need help to solve. The problem is that the bottom div gets stucked at the top instead of the bottom, and I can’t figure out the reason for this.

JAVASCRIPT (jQuery):

$('<div/>', {
    id: 'window',
    width: this.width,
    height: this.height,
}).appendTo('#content');

$('<div/>', {
    id: 'windowTop',
    width: this.width,
    height: '30'
}).appendTo('#window');

$('<div/>', {
    id: 'windowBottom',
    width: this.width,
    height: '50',
}).appendTo('#window');

CSS:

#window {
    position: relative;
    background: red;
    margin-left: auto;
    margin-right: auto; 
}

#windowTop {
    position: absolute;
    top: 0; 
    background: yellow;
}

#windowBottom {
    positon: absolute;
    bottom: 0;
    background: green;
}

Answer 1

Your #windowBottom is a child of #window, thus it will stick to the bottom of the #window-DIV. If #window has no content, #windowBottom will appear at the page-top.