min-height not working for Parent Div

Problem

min-height is not working for Parent Div after i set float:left property to it's child div.

could you help me .

<style type="text/css">
*{ margin: 0 auto; padding: 0; }

 #wrapperd{
 width : 500px;
 border : 1px solid red;
 min-height:200px;
 }

 #test {
 border:2px solid blue; 
 width:600px; 
 float:left; 
 height:500px;

  }
 </style>

HTML code

 <div id = "wrapperd"> <!-- Parent Div -->
 <div id = "test"> </div> <!-- Child Div -->
 </div>

Demo Link :- http://jsfiddle.net/rushijogle/cFX68/2/

Thanx in Advance :)

Problem courtesy of: Rushikesh jogle

Solution

There are two things you can do. One is to add a clearing element (with clear: left or clear: both after the floating element.

http://jsfiddle.net/ExplosionPIlls/cFX68/3/

The other is to add overflow: hidden to the parent div, which has the effect of "pulling" the height of the div down so it surrounds the taller floated div.

http://jsfiddle.net/ExplosionPIlls/cFX68/4/

Note that this has no effect on the width of the child div whatsoever.

Solution courtesy of: Explosion Pills

Discussion

Classic clear fix issue:
1) set the parent to overflow:hidden; as said above. Only issue is if any content will spill out of the parent box.
2) Another clear fix trick I like to use is: http://nicolasgallagher.com/micro-clearfix-hack/ which I think is similar to Cherry's comment...

Discussion courtesy of: Jason Lydon

This recipe can be found in it's original form on Stack Over Flow.