CSS усаживающий элемент, не вызывающий переход к следующей строке

Question

Я хочу сжать красный элемент и иметь синий элемент на фиксированной ширине в нужном месте.

Посмотрите на пример: http://jsfiddle.net/YUTFc/

<div class="wrapper"> 
    <div class="red">1</div> 
    <div class="blue">2</div> 
</div> 

.wrapper{ 
    max-width: 300px; 
    height: 100px; 
    margin: 0 auto; 
} 

.red{ 
    height: 100%; 
    width: 80%; 
    background-color: red; 
    float: left; 
} 

.blue{ 
    height: 100%; 
    width: 60px; 
    background-color: blue; 
    float: right; 
} 

и изменить размер окна.

Что я могу сделать? Спасибо.

Answer 1

Попробуйте это:

.wrapper { 
    max-width:300px; 
    height:100px; 
    margin:0 auto; 
    position:relative; 
} 
.red, .blue { 
    position:absolute; 
    top: 0; bottom: 0; 
} 
.red { 
    background-color:red; 
    left:0; right:60px; 
} 
.blue { 
    background-color:blue; 
    width:60px; right:0; 
} 

Updated Fiddle

Answer 2

Если содержание будет непредсказуемо размера, превращая свои элементы в элементы таблицы с помощью CSS будет вашим лучшим выбором.

http://jsfiddle.net/YUTFc/2/

.wrapper{ 
    display: table; 
    max-width: 300px; 
    height: 100px; 
    margin: 0 auto; 
} 

.red{ 
    height: 100%; 
    width: 80%; 
    background-color: red; 
    display: table-cell; 
} 

.blue{ 
    height: 100%; 
    width: 60px; 
    background-color: blue; 
    display: table-cell; 
}