Левая ширина div-жидкости, ширина в правом углу в px

Question

Я хочу создать макет HTML, где левый div настраивается на размер окна, а правый div имеет фиксированный размер. Как мне установить ширину левой? Я не могу делать 70% и 30%, потому что правый div имеет фиксированный размер.

jsfiddle

HTML

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

CSS

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

.right{ 
height: 100%; 
width: ....; 
background-color: black; 
float: right; 
} 

Answer 1

Одним из вариантов является использование функции calc(), хотя это не supported ниже IE 9, и вы должны включить -moz и -webkit префиксы для FF 15 & Хром 25 и ниже. В мобильных браузерах почти нет поддержки, как отметил @cimmanon в комментарии ниже.

#left{ 
height: 100%; 
width: -webkit-calc(100% - 100px); 
width: -moz-calc(100% - 100px); 
width: calc(100% - 100px); 
background-color: red; 
float: left; 
} 

http://jsfiddle.net/j73th/1/

Вы также можете дать #right Див отрицательное правое поле, равное ширине #left DIV:

http://jsfiddle.net/j73th/3/

Answer 2

DEMO FIDDLE

Примечание- I Меняю размещение html right и left ДИВ намеренно

HTML код-

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

CSS code-

body, html{ 
height: 100%; 
width: 100%; 
margin: 0; padding: 0; 
} 

#left{ 
height: 100%; 
margin-right:102px; 
background-color: red; 
} 

#right{ 
height: 100%; 
width: 100px; 
float:right; 
background-color: black; 
} 

Answer 3

Вы можете использовать абсолютное позиционирование на #left элемента.

Fiddle: http://jsfiddle.net/j73th/10/

#left 
{ 
    position: absolute; 
    left: 0; 
    right: -100px; 
} 

#right 
{ 
    float: right; 
    width: 100px; 
}