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

Question

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

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

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

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

Answer 1

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

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

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

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

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

Answer 3

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

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