ansaurus

Question

how to make child divs always fit inside parent div?

Answer 1

A:

you could use inherit

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}

Silfverstrom 2009-07-08 14:01:03

I don't think that works. Well, at least if those are the only changes you make.

thebrokencube 2009-07-08 14:07:15

I could not observe any changes from original when using these styles.

Tim Sheiner 2009-07-08 17:41:21

Answer 2

+3 A:

In your example, you can't: the 5px margin is added to the bounding box of div#two and div#three effectively making their width and height 100% of parent + 5px, which will overflow.

You can use padding on the parent Element to ensure there's 5px of space inside its border:

<style>
    html, body {width:100%;height:100%;margin:0;padding:0;}
    .border {border:1px solid black;}
    #one {padding:5px;width:500px;height:300px;}
    #two {width:100%;height:50px;}
    #three {width:100px;height:100%;}
</style>

EDIT: In testing, removing the width:100% from div#two will actually let it work properly as divs are block-level and will always fill their parents' widths by default. That should clear your first case if you'd like to use margin.

ajm 2009-07-08 14:06:43

Or, stick with percentages: using a percentage margin and a percentage width/height will also do the trick as you're working with the same "units." That 100% height is going to get you, though, since there's another child in there using up part of the parents' height.

ajm 2009-07-08 14:14:09

That doesn't quite work, the height: 100% in #three will always overflow the parent container.

Matt Bridges 2009-07-08 14:17:33

Yeah, as I said in my comment, the 100% height is going to overflow every time. Something like a 2% margin on #two and #three, a 10% height on #two and an 82% height on #three might do the trick.

ajm 2009-07-08 15:34:50

As noted, this doesn't address issue of child div that is using vertical space, and thus pushing other child out of parent.

Tim Sheiner 2009-07-08 17:25:11

Answer 3

+1 A:

If I've understood you correctly, the easiest method is to float the children. For example:

#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }

Setting a dimension (height/width) and overflow to auto or hidden on the parent element causes it to contain any floated child elements.

Note that overflow:hidden; can occasionally cause problems with content getting cut off, in which case you might want to try this alternative method:

http://www.positioniseverything.net/easyclearing.html

Olly Hodgson 2009-07-08 14:08:27

This forces you to set the height of the contained elements as opposed to setting the height of the container and making the contained elements stretch to fit.

Matt Bridges 2009-07-08 14:13:07

This sort of works, but truncates bottom of long child, doesn't make child 'fit' inside parent

Tim Sheiner 2009-07-08 17:28:27

Answer 4

A:

For width it's easy, simply remove the width: 100% rule. By default, the div will stretch to fit the parent container.

Height is not quite so simple. You could do something like the equal height column trick.

html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}

Matt Bridges 2009-07-08 14:10:56

This one also truncates the long child div, but doesn't make it shorten to fit inside parent with desired margin at bottom.

Tim Sheiner 2009-07-08 17:31:53

Answer 5

A:

For closure, I think the answer to this question is that there is no solution. The only way to get the behavior I want is with javascript.

Tim Sheiner 2009-07-16 19:55:59

ansaurus

tags:

views:

answers:

how to make child divs always fit inside parent div?

related questions