[css] Div not expanding even with content inside

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.)

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

Help is greatly appreciated.

This question is related to css html

The answer is


You didn't typed the closingtag from the div with id="infohold.


Add <br style="clear: both" /> after the last floated div worked for me.


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

Putting a <br clear="all" /> after the last floated div worked the best for me. Thanks to Brent Fiare & Paul Waite for the info that floated divs will not expand the height of the parent div! This has been driving me nuts! ;-}


You probably need a clear fix.

Try this:

What methods of ‘clearfix’ can I use?


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.


You have a fixed height on .infohold, so the .albumhold div will only add up to the height of .infohold (20px) + .albumpic (110px) plus any padding or margin which I haven't included there.

Try removing the fixed height on .infohold and see what happens.


div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.