1

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?

Aneesh
  • 1,703
  • 3
  • 24
  • 34
  • 2
    Shouldn't you use `padding-bottom` for that? – Mr. Alien Jul 08 '13 at 12:35
  • How much padding do I keep? If I keep like 30px, it works fine, ultil the text grows enormously when the 30px becomes insufficient. Do I use percentage? Doesn't seem to work with non-fixed width divs. Sorry Im totally new. – Aneesh Jul 08 '13 at 12:38

4 Answers4

0

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;
}
EmRa228
  • 1,226
  • 13
  • 22
  • Same problem as above. Works fine when text grows a bit. But if the text grows exponentially, 10% becomes less and the parent again falls short. If I keep it higher like 30%, it works for large amount of text but when text is less, the layout gets broken. – Aneesh Jul 08 '13 at 12:41
  • Works perfectly thanks a lot ! clear:both was the key I guess. – Aneesh Jul 08 '13 at 12:55
  • @user2067771 I see where you were stuck, read my answer [here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) for explanation – Mr. Alien Jul 08 '13 at 13:01
0

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.

i.e. #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;
}
Don
  • 3,987
  • 15
  • 32
Jacques
  • 6,936
  • 8
  • 43
  • 102
  • Oh sorry. Those hashes arent the issue I made a mistake while copying. It doesn't work. Here's the link with the increased content.: http://jsfiddle.net/ZTtwv/3/ – Aneesh Jul 08 '13 at 12:45
0

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

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
0

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

André Dion
  • 21,269
  • 7
  • 56
  • 60
  • This works but not the way I want. This causes scroll bars to appear. I don't scroll bars. Rather I just want the parent background to expand. – Aneesh Jul 08 '13 at 12:43
  • I've updated my answer to include an alternative (`.clearfix` or `.cf`) solution. – André Dion Jul 08 '13 at 12:45