Take the 2-minute tour ×

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 :)

share|improve this question
You just need to clear your floats! –  CherryFlavourPez Mar 19 '13 at 17:14
One old trick is to add overflow: hidden; to the div. Not sure about the downsides tho. jsfiddle.net/cFX68/5 –  Sami N Mar 19 '13 at 17:16
Like @CherryFlavourPez said — #wrapperd::after { content: ""; display: block; clear: both; } –  couzzi Mar 19 '13 at 17:17
Your parent div property "min-height" is working fine. As it should.Your floating div, is out of the normal document flow. So your parent div ignores it. Thats why it does not grow accordingly with your floating div,s height. –  Fico Mar 19 '13 at 17:23
add comment

2 Answers

up vote 0 down vote accepted

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.

share|improve this answer
Neither of those are ideal. The first option introduces an unnecessary and non-semantic extra element, and the second is not appropriate as the OP is setting the child width as greater than the parent, so we can assume he wants the extra width to be visible. As such, this fiddle shows the simplest solution. CSS: #wrapperd:after { content: ""; display: table; clear: both; } –  CherryFlavourPez Mar 19 '13 at 17:25
overflow-y: hidden will work on most browsers (not <IE8). –  gaynorvader Mar 19 '13 at 17:42
add comment

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...

share|improve this answer
add comment

Your Answer


