div, чтобы заполнить оставшееся пространство (ширина)

Question

эй, у меня есть div со 100% шириной (ширина экрана компьютера может быть что угодно) внутри этой ширины у меня есть два дочерних divs с фиксированной шириной, говорят 50px, и я хочу другой ребенок ДИВ занять оставшиеся (100% -50px) пространство может кто-нибудь сказать мне, как я достичь этого, пожалуйста ....

Я сделал, как

<div style="width:100%;min-height:90px;"> 
<div style="float:left;width:50px;height:60px;"> 
</div> 
<div style="float:left;width:90%;height:60px;"> 
</div> 
</div> 

в 50, если этот код px не является 10% экрана, там есть какое-то пустое поле, которое я не хочу

Answer 1

Вы можете использовать макет таблицы:

HTML:

<div class="container"> 
    <div class="fixed-width"></div> 
    <div class="fluid-width"></div> 
</div> 

CSS:

.container { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.fixed-width { 
    display: table-cell; 
    width: 50px; 
} 

.fluid-width { 
    display: table-cell; 
} 

http://jsfiddle.net/myajouri/zJq8N/

ИЛИ ...

Вы можете использовать width: calc(100% - 50px), который является not supported in IE8 and below.

.container { 
    width: 100%; 
} 

.fixed-width { 
    float: left; 
    width: 50px; 
} 

.fluid-width { 
    float: left; 
    width: calc(100% - 50px); 
} 

http://jsfiddle.net/myajouri/mTq6x/

Answer 2

jsFiddle

только поплавок фиксированной ширины элемента.

CSS:

.container { 
    height: 10px; 
    width: 100%; 
} 
.right { 
    background: red; 
    height: 10px; 
} 
.left { 
    background: blue; 
    width: 50px; 
    height: 10px; 
    float: left; 
} 

HTML:

<div class="container"> 
<div class="left"> 
</div> 
<div class="right"> 
</div> 
</div>