I have a stack of DIVs. With in those divs are expandable jquery panels, placed with in those divs. When the Panel expands, if it is larger than the div it is contained in I want it to expand. I have been trying the endless suggestions here, but there is something wrong with my CSS. Thank you for any help. I’m wondering if it’s my position: absolute. I need the top and left attributes to be locked in but the divs can expand down, I would just like them to push the ones below themselves down as well.
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 815px; /*Width of frame div*/
height: 600px;
overflow: auto; /*Disable scrollbars. Set to "scroll" to enable*/
overflow-x: hidden;
background-image: url('../images/Bkgrnd.png');
background-repeat:repeat-x;
}
#listcontainer{
position:absolute;
width: 260px;
margin-top: 70px;
margin-left:40px;
}
/* Main Header */
#headercontent{
position:absolute;
background: #3e3e3e;
top:0px;
height: 65px;
width: 615px;
position: fixed;
left: 200px;
}
#subheading1 {
position: absolute;
background: #585858;
top: 65px;
height: 45px;
width: 615px;
left: 200px;
color:#ffffff;
}
#response{
position: absolute;
background: #585858;
top: 110px;
min-height: 115px;
width: 615px;
left: 200px;
color:#ffffff;
/* box-shadow:inset 5px 5px 2px #000000; */
}
#subheading2 {
position: absolute;
background: #313131;
top: 225px;
height: 45px;
width: 615px;
left: 200px;
color:#ffffff;
}
#summary {
position: absolute;
background: #454545;
top: 270px;
height: 375px;
width: 615px;
left: 200px;
}
Just remove all position:absolute from your CSS. Then, if you want align it with others, you can use margin, padding, and float…
Please provide more details of your HTML file, I can help you more.