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
  • 27
  • 3

3 Answers3

0

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

Brad
  • 159,648
  • 54
  • 349
  • 530
  • 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
  • 29,399
  • 7
  • 59
  • 71
  • 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
  • 16,426
  • 3
  • 48
  • 55