Div not expanding even with content inside
CssHtmlCss Problem Overview
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.
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
There are two solutions to fix this:
- Use
clear:both
after the last floated tag. This works good. - If you have fixed height for your div or clipping of content is fine, go with:
overflow: hidden
Solution 3 - Css
You probably need a clear fix.
Try this:
https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best
Solution 4 - Css
Add <br style="clear: both" />
after the last floated div worked for me.
Solution 5 - Css
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! ;-}
Solution 6 - Css
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.
Solution 7 - Css
You didn't typed the closingtag from the div with id="infohold.
Solution 8 - Css
div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.