развернуть плавающий объект, когда плавающий объект внутри расширяется

Question

Эй, ребята, быстрый вопрос, у меня есть ссылка при нажатии выпадающего списка. Этот список расположен справа, чтобы правильно его расположить. Этот список находится в другом поле, которое было перемещено. Моя проблема заключается в том, что когда список расширяется, поле не открывается, а список выходит из поля контейнера, если список не является плавающим. Каким бы плавающим он ни был, кажется, что это единственный способ получить желаемую позицию. Если у кого-то есть идеи, как решить эту проблему, я был бы признателен.

.container-box {
margin-top:0px;
float:left;
padding-left:5px;
position:relative;
}

#box-within {
float:right;
font-weight:bold;
max-height:250px;
display: none;
background-color:#fff;
overflow: auto;
width:325px;
padding:5px;
position:relative;
}

Answer 1

Для вас контейнер: min-width:100px; display: inline-block;, проверено в FireFox.

Answer 2

ОК, вот ваш решенный CSS. Я сделал небольшое изменение в порядке, чтобы сделать это заметным

.container-box {
margin-top:0px;
float:left;
padding:5px;
position:relative;
border:1px #666666 solid;
}

#box-within {
float:right;
font-weight:bold;
width:325px;
padding:5px;
background:#CCCCCC;
}

Answer 3

Это проблема очистки. Одним из решений является добавление другого HTML-элемента после вашего «внутреннего» поля: что-то вроде <div style="clear: both;"> или эквивалентного. Другое более элегантное решение включает установку width и / или height и overflow.

Quirksmode имеет хорошее объяснение обоих методов.