Как стилизовать div с фиксированной шириной и автоматическим изменением размера?

Question

Я хочу создать контейнер div, который имеет ширину между 800px и 1000px.

Внутри есть два div и вы хотите исправить левый div до 250px.

Для правильного DIV я хочу это сделать по ширине размер автоматически

jsfiddle examle

HTML

<div style="width: 100%;"> 
    <div class="container"> 
     <div class="left"> 
      Left div<br />(fixed to 250px) 
     </div> 
     <div class="right"> 
      Right div<br />(width fit to blue area left) 
     </div> 
    </div> 
</div> 

CSS

.container { 
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;  
} 
.left { 
    width: 250px; 
    float: left; 
    height: 200px; 
    background-color: #0F0; 
} 
.right { 
    width: 100%; 
    background-color: #F00; 
    height: 200px; 
    float: left; 
} 

Answer 1

Это будет делать это. Он использует calc (http://jsfiddle.net/vn84nm30/6/)

.right { 
    width: calc(100% - 250px); 
    background-color: #F00; 
    height: 200px; 
    float: left; 
} 

Answer 2

Вы можете просто добавить display: flex к родителю, .container элемент:

Updated Example

.container { 
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px; 
    display: flex; 
} 

В качестве альтернативы, вы можете установить display родителя, .container элемент table, а затем установить дочерние элементы в display: table-cell. Если вы хотите, чтобы дочерние элементы уважать ширину, установить table-layout: fixed на родительский элемент:

Alternative Example Here

.container { 
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px; 
    display: table; 
    table-layout: fixed; 
} 
.left { 
    width: 250px; 
    height: 200px; 
    background-color: #0F0; 
    display: table-cell; 
} 
.right { 
    width: 100%; 
    background-color: #F00; 
    height: 200px; 
    display: table-cell; 
} 

Answer 3

Удалить float: left из right элемента.

.container { 
 
    width: 100%; 
 
    min-width: 800px; 
 
    max-width: 1100px; 
 
    background-color: #06F; 
 
    margin: 0 auto; 
 
    height: 420px; 
 
    padding: 10px 0px;  
 
} 
 
.left { 
 
    width: 250px; 
 
    float: left; 
 
    height: 200px; 
 
    background-color: #0F0; 
 
} 
 
.right { 
 
    width: 100%; 
 
    background-color: #F00; 
 
    height: 200px; 
 
}

<div style="width: 100%;"> 
 
    <div class="container"> 
 
     <div class="left"> 
 
      Left div<br />(fixed to 250px) 
 
     </div> 
 
     <div class="right"> 
 
      Right div<br />(width fit to blue area left) 
 
     </div> 
 
    </div> 
 
</div>

Answer 4

Вы можете попытаться удалить поплавок: прямо на красной DIV: D или Может быть, как это: http://jsfiddle.net/vn84nm30/8/

Используемые функции таблиц;)

верхней DIV: display: table;

контейнер: display: table-row

удален поплавок оставил высота определяется родителем: D

Answer 5

Решение

.container { 
 
    width: 100%; 
 
    min-width: 800px; 
 
    max-width: 1100px; 
 
    background-color: #06F; 
 
    margin: 0 auto; 
 
    height: 420px; 
 
    padding: 10px 0px; 
 
    
 
    
 
} 
 
.left { 
 
    width: 250px; 
 
    float: left; 
 
    height: 200px; 
 
    background-color: #0F0; 
 
} 
 
.right { 
 
    width:100%; 
 
    background-color: #F00; 
 
    height: 200px; 
 
    
 
}

<div style="width: 100%; display: table; border-collapse: collapse; width: 100%; min-width: 800px; max-width: 1100px;"> 
 
    <div class="container"> 
 
     <div class="left">Left div 
 
      <br />(fixed to 250px)</div> 
 
     <div class="right">Right div 
 
      <br />(width fit to blue area left)</div> 
 
    </div> 
 
</div>