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
).
This question is related to
html
css
cross-browser
parent-child
You don't even need width: 100%
in your child div:
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;
}
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.
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.
In case you want to use that padding space... then here's something:
All the colors are background colors.
Source: Stackoverflow.com