Как сделать div-процентную ширину относительно родительского div, а не viewport

Ответ 1

Указание нестатического положения, например position: absolute/relative на node означает, что оно будет использоваться в качестве ссылки для абсолютно позиционированных элементов внутри него http://jsfiddle.net/E5eEk/1/

#outer {
  min-width: 2000px; 
  min-height: 1000px; 
  background: #3e3e3e; 
  position:relative
}

#inner {
  left: 1%; 
  top: 45px; 
  width: 50%; 
  height: auto; 
  position: absolute; 
  z-index: 1;
}

#inner-inner {
  background: #efffef;
  position: absolute; 
  height: 400px; 
  right: 0px; 
  left: 0px;
}

<div id="outer">
  <div id="inner">
    <div id="inner-inner"></div>
  </div>
</div>

Ответ 2

Использовать позицию: относительная по родительскому элементу.

Также обратите внимание, что если бы вы не добавили никаких атрибутов позиции ни к одному из div, вы бы не видели этого поведения. Хуан объясняет далее.