When an element is floating, such as #text, its dimensions will no longer impact the size of #parent. However, the min-height property will still affect #parent regardless of its content.
If you want #parent to adjust to the dimensions of #text again, you can set overflow: hidden/auto on #parent. Alternatively, you can use the .clearfix solution if using overflow is not suitable:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
To implement this, simply add the .cf class to #parent