Создание 2 наложенные дивы под 2 бок о бок дивы

Question

Я не могу найти, как создать простую выравнивание:

имеют линию с 2 бок о бок дивы, первым занимая пространство, которое он требует и последнее - оставшееся пространство (это достаточно просто с встроенным блоком или поплавком)

В правом div должны быть два наложенных дочерних div, каждый из которых принимает 100% правого родителя (этого я не мог сделать).

Моей мотивацией является индикатор выполнения с меткой (слева) и меткой процента над индикатором выполнения. Текст метки прогресса должен быть центрирован (вот почему мне нужно, чтобы он взял 100% правильного родителя)

Если у кого-то есть идеи, я бы хотел их услышать.

Вот пример моей проблемы:

<div id="all"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
    </div> 
</div> 

#all { 
    width: 200px; 
    height: 100px; 
    background: grey; 
    border: 1px solid; 
} 

#left { 
    background: red; 
    float: left; 
    height: 100% 
} 

#right { 
    background: blue; 
    display: block; 
    height: 100%; 
} 

Вот jsFiddle иллюстрация этого: http://jsfiddle.net/a9cnH/3/

Моей проблема: Я хочу, чтобы поместить 2 дивы в «правильных» делах. Каждый из них должен принимать 100% правого div. Если я использую на них абсолютное значение, я должен сделать свою «правильную» позицию div иначе, чем «статический», но это не приведет к выравниванию рядом с левым div рядом.

Answer 1

Если вы хотите складывать divs поверх другого, вам нужно использовать z-index и выравнивать divs абсолютно. Пример:

<div style="border: 1px sold red; width: 300px; height:200px; background-color:White;position:relative;"> 
     <div style="width:50%; height:100%; background-color:Red; z-index:2; float:left; "></div> 
     <div style="width:50%; height:100%; background-color:blue;z-index:2; float:right; "></div> 
     <div style="width:50%; height:50%; background-color:green;z-index:3; top:25%; left:25%; position:absolute; "></div> 
    </div> 

Answer 2

Я, наконец, получил его.

Мне нужно было как левое, так и правое divs, чтобы скрыть переполнение. Чем я могу поместить правильную позицию div.

<div id="all"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     <div id="right1"> 
      r1 
     </div> 
     <div id="right2"> 
      r2 
     </div> 
    </div> 
</div> 

#all { 
    width: 200px; 
    height: 100px; 
    background: grey; 
    border: 1px solid; 
} 

#left { 
    background: red; 
    height: 100%; 
    float: left; 
    overflow: hidden; 
} 

#right { 
    background: blue; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

#right1 { 
    width: 100%; 
    background: green; 
    position: absolute; 
} 

#right2 { 
    width: 100%; 
    position: absolute; 
    text-align: center; 
} 

Вот как это выглядит: http://jsfiddle.net/nSD66/