使父母超越孩子

Question

I have a parent container which has a div containing text:

<div id="parent">
<div id="text"></div>
</div>

I have the following CSS rule for them:

parent{
clear:both;
background:#f3f3f3;
min-height:180px;
}
text{
float:left;
overflow:auto;
min-height:44px;
width:400px;
margin-left:10px;
margin-top:12px;
}

Thing is, the parent div grows only upto the length of the text. I want it to grow a bit beyond the text say 20% more. How do I achieve this?

Answer 1

see this: http://jsfiddle.net/VJ6rg/1

#parent{
   padding:3%;
   float:left;
   overflow:auto;

   clear:both;
   background:#f3f3f3;
   min-height:180px;
}
#text{
   float:left;
   overflow:auto;
   min-height:44px;
}

Answer 2

Looks like it works as you're expecting it too. Apart from the fact that you're missing hashes in front of your CSS ids.

ie #text or #parent.

See the following fiddle: http://jsfiddle.net/ZTtwv/

#parent {
    clear:both;
    background:#f3f3f3;
    min-height:180px;
    border:1px solid green;
}
#text {
    float:left;
    overflow:auto;
    min-height:44px;
    width:400px;
    margin-left:10px;
    margin-top:12px;
    border:1px solid red;
}

Answer 3

Give it some padding like this:

For all sides: padding: 20%;

For top: padding-top: 20%;

For bottom: padding-bottom: 20%;

For left: padding-left: 20%;

For right: padding-right: 20%;

Answer 4

Since you're floating #text that element's dimension will no longer affect #parent . The min-height will still apply to #parent regardless of its content.

Setting overflow: hidden/auto on #parent will cause it to pick up #text 's dimension once again. You may also use the .clearfix solution if overflow isn't suitable for you:

/**
 * 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 use this, simply apply the .cf class to #parent