Cross browser method to fit a child div to its parent's width

Question

I'm looking for a solution to fit a child div into it's parent's width.

Most solutions I've seen here are not cross-browser compatible (eg. display: table-cell; isn't supported in IE <=8).

Solution 1

The solution is to simply not declare width: 100%.

The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).

See: http://jsfiddle.net/U7PhY/2/

Just in case it's not already clear from my answer: just don't set a width on the child div.

You might instead be interested in box-sizing: border-box.

Solution 2

You can use box-sizing css property, it's crossbrowser(ie8+, and all real browsers) and pretty good solution for such cases:

#childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

Fiddle

Solution 3

If you put position:relative; on the outer element, the inner element will place itself according to this one. Then a width:auto; on the inner element will be the same as the width of the outer.

Solution 4

In your image you've putting the padding outside the child. This is not the case. Padding adds to the width of an element, so if you add padding and give it a width of 100% it will have a width of 100% + padding. In order to what you are wanting you just need to either add padding to the parent div, or add a margin to the inner div. Because divs are block-level elements they will automatically expand to the width of their parent.

Solution 5

In case you want to use that padding space... then here's something:

http://jsfiddle.net/qD4zd/

All the colors are background colors.

View more solutions

Comments

[Ivan Ivanic]

If I get your right, just do not declare width on child.

[Ivan Ivanic]

I think there is only one child?

[thirtydot]

Yup, I think you're right. The diagram confused me :( Luckily, I'd already written the "second part" of my answer, and that is the actual answer here.

[Daniel Gruszczyk]

you don't need to declare width attribute for child at all.

[mate64]

i've uploaded a new image - sorry for the bad diagram ! of course i do know what padding means ;)

[Steeven]

Then just remove width:100%; and the box will fit in automatically.

[StackOverflowUser]

It's possible a style property that is part of a component you've included in your project is setting the width property and causing a problem. In this case, explicitly set width: auto for the child div.