title: CSS float property shows no height?
body: <p>I'm fairly new to CSS, so, this might look silly:</p>
  
  <p>In CSS, i use the property to <code>float:left</code> to position a content left to the neighbouring element, now, i have a container for all the elements that have the float property. how do i make the parenting element adjust it's height according to it's content?</p>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;div id="page"&gt;
  &lt;div id="side"&gt;
      &lt;p&gt;my sidebar&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;p&gt;my content&lt;/p&gt;
      &lt;p&gt;my content1&lt;/p&gt;
      &lt;p&gt;my content2&lt;/p&gt;
      &lt;p&gt;my content3&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>the CSS</p>
  
  <pre><code>/* the "border:3px solid #000;" are used to make the div border visble*/
  #page{
  position:relative;
  width:400px;
  background-color: #F4F0EC;
  border:3px solid #000;
  }
  #side{
  
  border:3px solid #000;
  float:left;
  }
  #content{
  float:left;
   border:3px solid #000;
  }
  </code></pre>
  
  <p>with the above, the <code>&lt;div id="page"&gt;</code> look like it has a height of 0px.... how do i make it warp the content ??</p>
  
  <p>since i'm new to CSS, please explain what am i doing wrong, thanks</p>
  
  <p>Fiddle:<a href="http://jsfiddle.net/AuSmP/" rel="noreferrer">http://jsfiddle.net/AuSmP/</a></p>