Div doesn't expand even with content inside

Question

I have a stack of divs inside each other, all of which have an identifier that only indicates CSS.

But for some reason, the surrounding DIV tag only extends its value of the anointed height, and not by default automatically, which means that although the content inside, the support DIV only supports a certain height. I need it to adjust the height to the size of what is inside it (since the user data will be displayed, which will be displayed in points with more than 500 words).

Here is my HTML

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

And CSS for the HTML:

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

Help is appreciated.

Answer 1

Floating elements do not occupy any vertical space in their containing element.

All of your elements inside #albumhold are floating except for #albumhead , which is not like itd, taking up a lot of space.

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

Answer 2

There are two solutions:

• Use clear:both after the last missing tag. It works well.
• If you have a fixed height set for your div or trim the content in order, go to: overflow: hidden

Answer 3

You probably need a clear fix.

Try the following:

What methods of 'clearfix can I use?

Answer 4

Put <br clear="all" /> after the last floating div worked better for me. Thanks to Brent Fiare and Paul Waite for the information that divs floats, the height of the parent div will not expand! It turned me on !; -}

Answer 5

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

Answer 6

You have a fixed height on .infohold, so div.albumhold will only add to the height .infohold (20px) + .albumpic (110px) plus any additions or fields that I haven't added there.

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

Answer 7

A div will not expand if there are other floating div elements inside it, so remove the float from the inner div elements and it will expand.

Answer 8

You did not type finaltag from a div with id = "infohold .