1

I have a div named 'post-wrap'. I have the height for this div set to auto. But, for some reason, I cannot get it to grow when content is added. What am I doing wrong? Does it have to do with the floats?

http://jsfiddle.net/h8gSV/

user1643248
  • 29
  • 3

3 Answers3

0

Your parent element, post-top has its height fixed at 50px.

Brad
  • 152,561
  • 47
  • 332
  • 504
  • 3
    If something has a fixed height then it won't grow when content inside it won't fit. Hence "fixed". – Quentin Oct 08 '12 at 16:35
  • @user1643248, You probably want to try setting a `min-height`. – Brad Oct 08 '12 at 16:38
  • @user1643248 I think that you meant to put the content outside the #post-top, as it was supposed to be like a post header, right? You'll have or to remove it from there, or remove the fixed height. – Derik Oct 08 '12 at 16:40
0

You have set a height to #post-top, which encloses all other elements. Thus your height is always 50px. And yes you need to clear the floats:

#post-top {
    width: 580px;
    overflow: hidden;
}
feeela
  • 27,811
  • 6
  • 58
  • 68
  • OR remove the content from inside the #post-top, which I think makes more sense to him. – Derik Oct 08 '12 at 16:36
  • That's different from clearing the floats. See http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats/6482054#6482054 and http://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t/12783114#12783114 – BoltClock Oct 08 '12 at 16:36
  • @BoltClock OK; nice info – nonetheless it has the same effect as adding any other clear-fix hack… – feeela Oct 08 '12 at 16:38
  • @Derik Maybe, but this is a CSS question and I wont speculate about what the authors intent s where, unless he/she posts them… – feeela Oct 08 '12 at 16:41
0

You need to add a clearfix class to #post-wrap and remove the height:50px from #post-user.

Fiddle: http://jsfiddle.net/kboucher/rH4h5/

Kevin Boucher
  • 15,718
  • 3
  • 43
  • 54