Two divs floating right one above another

Question

Hi, 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

Personally I would wrap them in a container div, and give it a width and float it right.

#sidebar{
  width: 250px;
  float: right;
}

Answer 2

You need to use both float:right and clear:right, which ensures that the right-hand side of the element is unobstructed to the edge of the containing element.

<div id="parent" style="width: 80%">

    <div id="up"   style="float: right; clear: both;">div with id 'up'</div>
    <div id="down" style="float: right; clear: both;">div with id 'down'</div>
    'parent' div

</div>

Answer 3

You need to make sure that the parent block (#parent in your case) becomes the containing block block formatting context of the divs #up and #down, so that any clearing only happens inside that containing block 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/visudet.html#containing-block-details 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.