Css auto height issue with alignment

Question

 #container
 {
   background: #787234;
   width:980px;
   height:auto;
   margin-left: auto;
   margin-right: auto;
   position:relative;
   //float:left;
}

container height is set to auto. Still I am facing height issue. Since the DIV is aligned to center I am not able to use float:left.

Please tell me how to get the height:auto without using float:left

here is the code snippet

Edit:

float:left is giving me the result but my div won't be in center if I use float:left.

Solved: (Not having 100 Reputation to Answer this )

Since the #container is aligned to center, it's giving me height:auto issue. I solved by creating a sub-container div having float:left

Hence, float:left is the answer which I cannot use in #container.

#container
{
  width:980px;
  margin-left: auto;
  margin-right: auto;
}

#sub-container
{
  width:100%;
  height:auto;
  float:left;
  background: #FFF;
}

Answer 1

I had the same problem and I found a solution:

div#container {
    height: auto;
    overflow: hidden;
}

I got many div's in the container, but it won't work without overflow:hidden;.

When I put it in the above code, it works very well.

Answer 2

You do not seem to understand what your CSS is doing. You are aligning the div to the center using margin-left and margin-right, then you also want to float it to the left. These two styles are in conflict and will not work. Either you want the div in the middle, or on the left, it can't be both at the same time.

Also, the height is set to auto by default so you shouldn't have to explicitly state this.