получить нефиксированную ширину div для идеального соответствия родителям без переполнения?

Question

Учитывая следующий код:

<div class='wrapper'> 
    <div class='right-panel'>Here is the article</div> 
    <div class='left-panel'> 
     <div class='left-panel-contents'> 
      <div class='headline'> 
       <h1>HEADLINE</h1> 
      </div> 
     </div> 
    </div> 
</div> 

.wrapper { 
    height: 200px; 
    min-width: 960px; 
    max-width: 1060px; 
    background: gray; 
} 
.right-panel { 
    float: right; 
    height: 200px; 
    width: 760px; 
    background: blue; 
} 
.left-panel { 
    background: green; 
    height: 200px; 
} 
.left-panel-contents { 
    position: relative; 
    background: pink; 
    height: 100%; 
    width: 15%; 
    // how do I make this fill the width of the left panel 
} 
.headline { 
    background: black; 
    color: white; 
    line-height: 45px; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
} 

h1 { 
float: right; 

} 

http://jsfiddle.net/duw4G/

Я пытаюсь получить текст заголовка, чтобы развернуть весь путь к правой панели. Если содержимое левой панели полностью заполнило родителя, это было бы возможно. Если я установил его на 100%, переполнение: скрытый, он не решает проблему (содержимое левой панели заполняет всю ширину обертки)

Есть ли способ настроить мою технику, чтобы заставить это работать?

Answer 1

.wrapper { 
    height: 200px; 
    min-width: 960px; 
    max-width: 1060px; 
    background: gray; 
} 
.right-panel { 
    float: right; 
    height: 200px; 
     width:75%; 
    padding:0px; 
    margin:0px; 
    background: blue; 
} 
.left-panel { 
    background: green; 
    height: 200px; 
    width:25%; 
    padding:0px; 
    margin:0px; 

} 
.left-panel-contents { 
    position: relative; 
    background: pink; 
    height: 100%; 
    width: 100%; 
    // how do I make this fill the width of the left panel 
} 
.headline { 
    background: black; 
    height: 45px; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
float:left; position:relative; 
} 

Answer 2

.headline будет позиционироваться в соответствии с ближайшего родительского с не-статическом положении (т.е. относительного или абсолютного), или в окне просмотра, если такой родитель не найден.

Если это не требуется для других целей, удалите position:relative от .left-panel-contents, но добавьте его в .wrapper. См.: http://jsfiddle.net/duw4G/9/