Div not expanding even with content inside

Question

I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.

But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)

#albumhold {    width: 920px;    padding: 10px;    height: auto;    border: 1px solid #E1E1E1;    margin-left: auto;    margin-right: auto;    background-color: #E1E1E1;    background-image: url(../global-images/albumback.png);    background-position: top center;    background-repeat: repeat-x;  }    #albumpic {    display: block;    height: 110px;    width: 110px;    float: left;    border: 1px solid #000;  }    #infohold {    width: 800px;    background-color: #CCC;    float: right;    height: 20px;  }    #albumhead {    width: 800px;    height: 20px;    text-indent: 10px;    border: 1px solid #000;    color: #09F;  }    #albuminfo {    margin-top: 5px;    width: 800px;    float: right;    color: #09F;    word-wrap: break-word;  }

<div id="albumhold">    <div id="albumpic">Pic here</div>    <div id="infohold">      <div id="albumhead">Name | Date</div>      <div id="albuminfo">Information</div>    </div>  </div>

Help is greatly appreciated.

Answer 1

Floated elements don’t take up any vertical space in their containing element.

All of your elements inside #albumhold are floated, apart from #albumhead, which doesn’t look like it’d take up much space.

However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.

Answer 2

There are two solutions to fix this:

1. Use clear:both after the last floated tag. This works good.
2. If you have fixed height for your div or clipping of content is fine, go with: overflow: hidden