expand floating object when floating object within expands

Question

Hey guys, quick question, I have a link when clicked drops down a list. This list is floated to the right to position it properly. This list is in another box that has been floated. My problem is that when the list expands, the box does not and the list comes out of the container box, unless the list is not floated. However floating it seems like the only way to get it to the position I want. If anyone has any ideas on how to solve this problem I would appreciate it.

.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

This is a clearing problem. One solution is to add another HTML element after your "inner" box: something like <div style="clear: both;"> or equivalent. Another more elegant solution involves setting width and/or height and overflow.

Quirksmode has a good explanation of both methods.

Answer 2

For you container : min-width:100px; display: inline-block;, tested in FireFox.

Answer 3

OK, here is your solved CSS. I made a slight change inorder to make this noticeable

.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;
}