Two divs floating right one above another

Question

I'm trying to put two divs on the right side of parent div one above another. Something like this:

 div#top 
|-------------------------------------||------------|
|div#parent                           ||div#menu    |
|                          |---------|||float:right |
|                          |div#up   |||            |
|                          |         |||            |
|                          |---------|||------------|
|                                     |
|                          |---------||
|                          |div#down ||
|                          |         ||
|                          |---------||
|-------------------------------------|

Any ideas how to do it using css? I can't use tables here because div#up is added in Master page (ASP.NET) and div#down is added in content. Div#parent is liquid with some min-width set and contains content that should not be overlapped by these divs so i think position:absolute is out of question here too.

One more detail: on the left and right of div#parent there ale divs floated left and right with menus. So adding clear:left/right to div#down floated right puts it under one of these menus...

Answer 1

You need to make sure that the parent block (#parent in your case) becomes the block formatting context of the divs #up and #down, so that any clearing only happens inside that block formatting context and ignores the floats outside of it. The easiest way to do this usually is to either let #parent float, too, or give it an overflow other than visible.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Here some proof, that I got it right this time: http://jsfiddle.net/Pagqx/

Sorry for the confusion.