title: Css auto height issue with alignment
body: <pre><code> #container
   {
     background: #787234;
     width:980px;
     height:auto;
     margin-left: auto;
     margin-right: auto;
     position:relative;
     //float:left;
  }
  </code></pre>
  <p><code>container</code> height is set to auto. Still I am facing height issue.  Since the DIV is aligned to center I am not able to use <code>float:left</code>.</p>
  <p>Please tell me how to get the <code>height:auto</code> without using <code>float:left</code></p>
  <p><a href="http://jsfiddle.net/Bhy3q/" rel="nofollow noreferrer">here is the code snippet</a></p>
  <p><strong>Edit:</strong></p>
  <p><code>float:left</code> is giving me the result but my <code>div</code> won't be in center if I use <code>float:left</code>.</p>
  <p><br><br>
  <strong>Solved: (Not having 100 Reputation to Answer this )</strong></p>
  <p>Since the <code>#container</code> is aligned to center, it's giving me <code>height:auto</code> issue. I solved by creating a sub-container <code>div</code> having <code>float:left</code></p>
  <p>Hence, <code>float:left</code> is the answer which I cannot use in <code>#container</code>.</p>
  <pre><code>#container
  {
    width:980px;
    margin-left: auto;
    margin-right: auto;
  }
  
  #sub-container
  {
    width:100%;
    height:auto;
    float:left;
    background: #FFF;
  }
  </code></pre>