Я ищу решение для установки дочернего элемента div в него parent width.
Большинство решений, которые я видел здесь , не совместимы с несколькими браузерами (например, display: table-cell; не поддерживается в IE <=8).
Решение состоит в том, чтобы просто не объявлять width: 100%.
По умолчанию используется width: auto, который для элементов уровня блока (например, div) будет принимать доступное "полное пространство" (отличное от того, как это делает width: 100%).
Смотрите: http://jsfiddle.net/U7PhY/2/
На всякий случай это уже не ясно из моего ответа: просто не устанавливайте width для дочернего div.
Вы можете использовать свойство box-sizing css, это crossbrowser (ie8 + и все реальные браузеры) и довольно хорошее решение для таких случаев:
#childDiv{
box-sizing: border-box;
width: 100%; //or any percentage width you want
padding: 50px;
}
Вам даже не нужно width: 100% в дочернем div:
Если вы поместите position:relative; на внешний элемент, внутренний элемент поместится в соответствии с этим. Тогда a width:auto; на внутреннем элементе будет таким же, как и ширина внешнего.
В вашем изображении вы помещаете дополнение вне ребенка. Это не тот случай. Заполнение добавляет ширину элемента, поэтому, если вы добавите прокладку и дадите ей ширину 100%, она будет иметь ширину 100% + отступы. Для того, что вы хотите, вам просто нужно либо добавить дополнение к родительскому div, либо добавить маркер во внутренний div. Поскольку divs являются блочными элементами, они автоматически расширяются до ширины их родительского элемента.
Если вы хотите использовать это пространство заполнения, то вот что-то:
Все цвета являются цветами фона.