Два div, плавающие прямо один над другим
Я пытаюсь поместить два элемента 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 # родитель там эль дивы плавали влево и вправо с меню. Таким образом, добавление clear: left / right для div # down плавает вправо и помещает его в одно из этих меню ...
3 ответа
Вам необходимо убедиться, что родительский блок ( #parent в вашем случае) становится контекстом форматирования блока для divs #up и #down , чтобы любая очистка происходила только внутри этого контекста форматирования блока и игнорировала поплавки вне его. Самый простой способ сделать это обычно - либо разрешить #parent float, либо дать ему переполнение , кроме visible .
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Вот доказательство того, что на этот раз я все понял правильно: http://jsfiddle.net/ Pagqx /
Извините за путаницу.
Вам нужно использовать как 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>
Лично я бы обернул их в контейнер div, задал бы ему ширину и разместил бы прямо.
#sidebar{
width: 250px;
float: right;
}