Два divs, плавающие справа один над другим

Я пытаюсь поместить два div с правой стороны родительского div один над другим. Что-то вроде этого:

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

Любые идеи, как это сделать, используя css? Я не могу использовать таблицы здесь, потому что добавлен div # up на главной странице (ASP.NET), а div # down добавлен в контент. Div # parent является жидкостью с некоторым набором минимальной ширины и содержит контент, который не должен перекрываться этими div, поэтому я думаю, что положение: абсолютное тоже не может быть и речи.

Еще одна деталь: слева и справа от родителя div # родительские div делятся слева и справа с меню. Таким образом, добавление clear: left/right to div # down floated right помещает его под одно из этих меню...

Ответ 1

Вам нужно убедиться, что родительский блок (#parent в вашем случае) становится контекстом форматирования блоков divs #up и #down, так что любая очистка происходит только внутри контекста форматирования блока и игнорирует плавает за его пределами. Самый простой способ сделать это обычно - либо оставить #parent float, либо дать ему overflow, кроме visible.

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

Вот некоторое доказательство, что я получил это право на этот раз: http://jsfiddle.net/Pagqx/

Извините за путаницу.

Ответ 2

Вам нужно использовать как float:right, так и clear:right, что гарантирует, что правая часть элемента не будет ограничена краем содержащего элемента.

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

Ответ 3

Лично я бы обернул их в контейнер div и дал ему ширину и плавал вправо.

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