min-height not working for Parent Div


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; }

 width : 500px;
 border : 1px solid red;

 #test {
 border:2px solid blue; 


HTML code

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

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

Thanx in Advance :)

Problem courtesy of: Rushikesh jogle


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


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.


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

Solution courtesy of: Explosion Pills


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.