expand floating object when floating object within expands
Question by Scarface
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 by Ken Redler
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 by Starx
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;
}
