Cross browser method to set a child div to its parent width

Question

I am looking for a solution to set a child div to parent width .

Most of the solutions I saw here are not compatible with multiple browsers (e.g. display: table-cell; not supported in IE <=8 ).

Answer 1

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

By default, width: auto , which for block-level elements (for example, div ) will take the available "full space" (different from how width: 100% does this).

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

Just in case, this is no longer clear from my answer: just do not set the width for the child div .

Answer 2

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

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

Fiddle

Answer 3

You don't even need width: 100% in the child div:

http://jsfiddle.net/DanielDZC/w2mev/1/

Answer 4

If you put position:relative; on the outer element, the inner element will fit accordingly. Then a width:auto; on the inner element will be the same as the width of the outer.

Answer 5

In your image, you place the addition outside the child. This is not the case. Filling adds the width of the element, so if you add a padding and give it a width of 100%, it will have a width of 100% + padding. For what you want, you just need to either add a padding to the parent div, or add a marker to the inner div. Since divs are block elements, they automatically expand to the width of their parent element.

Answer 6

If you want to use this fill space, then here is something:

http://jsfiddle.net/qD4zd/

All colors are background colors.