Relative positioning of two divs

Question

I made this fiddle, I am expecting the red div to be positioned directly below the yellow one. They are not. How can I position both the div up and down relative to wrapper?

Guessing it should be simple, but I can't get it to work. I think I need to use relative. The 'bars' are time lines and 'float around' freely.

HTML:

<div class="wrapper" style="background:blue">
    <div class="up" style="background:yellow"/>
    <div class="down" style="background:red"/>
</div>

CSS:

.wrapper {
    width:50px;
    height:400px;
    background:blue;
    margin:1em;
}
.up {
    position:relative;
    top:100px;  /*I want this one 100px from the top of .wrapper*/
    height:100px;
}
.down {
    position:relative;
    top:200px;  /*I want this one 200px from the top of .wrapper*/
    height:50px;
}

Answer 1

position:relative relates to the previous div.

Div .up has height 100px, so to place .down directly below .up, .down should contain top:100px. Therefore, top:200px on .down will place it 200px below .up, which is not what you want as .up only has height 100px. Solve it by changing top attribute of .down to top:100px

If you want to position it relative to wraper, use position:absolute.

Demo: http://jsfiddle.net/6wSAJ/274

Answer 2

you dont need to set top:xx; if you want just to stack yellow and red modify your html to be in format '<div></div>' rather than '<div />'