Content height:auto not working

Question

I think that I might have coded wrongly (or did it the short way), and I am trying to figure out how I am able to make the .content holds all the elements have an auto height which is dependent to what's in it. However, when I used height:auto; to the content, the content disappears totally (either it's height is gone or the .content did not accurately contains the elements in them.

Here, it affects the footer as well.

.content {
   width:930px;
   background: #eeeeee;
   background: -moz-linear-gradient(top,  #eeeeee 0%, #f4f4f4 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#f4f4f4));
   background: -webkit-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
   background: -o-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
   background: -ms-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
   background: linear-gradient(to bottom,  #eeeeee 0%,#f4f4f4 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4',GradientType=0 );
   border: 2px solid rgb(34, 178, 76);
   border: 2px solid rgba(34, 178, 76, .5);
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   height: 800px;
   margin: 93px auto;
   margin-bottom: 10px !important;
}

Website LIVE: http://nbtfootball.com.sg/wwfc

score 2 · Accepted Answer · answered Jan 20 '14 at 02:16

Remove the height: 800px and add overflow: auto.

The problem is caused by the floating elements inside it.

.content {
  width:930px;
  background: #eeeeee;
  background: -moz-linear-gradient(top,  #eeeeee 0%, #f4f4f4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#f4f4f4));
  background: -webkit-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: -o-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: -ms-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: linear-gradient(to bottom,  #eeeeee 0%,#f4f4f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4',GradientType=0 );
  border: 2px solid rgb(34, 178, 76);
  border: 2px solid rgba(34, 178, 76, .5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* height: 800px; REMOVE */
  margin: 93px auto;
  margin-bottom: 10px !important;
  overflow: auto; /* ADD */

}

Yes indeed, very true. – davidpauljunior Jan 20 '14 at 02:21 — davidpauljunior, Jan 20 '14 at 02:21

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

You don't need to add height: auto because it's the default value.

The reason is because you're not clear the float of elements with float: right or float: left style. Try to use clear: both on floating elements or better using clearfix

edited May 23 '17 at 11:56

Community

1
1

answered Jan 20 '14 at 02:19

Felix

37,892
8
43
55

Content height:auto not working

2 Answers2