Как изменить размер контейнера между двумя другими?

Question

В моем приложении у меня есть три контейнера <div>: левый, средний и правый. Они все плавают влево, и все это отлично работает, за исключением случаев, когда размер окна изменяется или ширина браузера меньше.

Левый и правый контейнеры должны оставаться неизменными (width 117px), в то время как средний контейнер должен меняться с разными разрешениями экрана или изменять размер окна. Проблема заключается в том, что браузер будет перемещать левый или правый контейнеры в сторону - над или под средним контейнером - до изменения размера среднего контейнера при уменьшении окна. Как заставить страницу не перемещать левый и правый контейнеры и изменять размер среднего контейнера? Inline CSS предназначен только для настройки. Есть ли простой трюк CSS, чтобы это произошло, или мне нужно будет использовать JS/jQuery, чтобы это произошло?

 <div style="width:100%;"> 
      <div style="background:url('image.png') no-repeat;width:117px;height:36px;float:left;"> 
      </div> 
      <div style="border:1px solid white;height:36px;width:100%;min-width:490px;max-width:1364px;float:left;"> 
      </div> 
      <div style="background:url('image.png') no-repeat;width:117px;height:36px;float:left;"> 
      </div> 
      <br style="clear:both;"> 
     </div> 

Answer 1

Одним из решений является использование таблиц: http://jsfiddle.net/e5gfbsu0/.

HTML:

<div class = "container"> 
    <div class = "left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, nulla sit amet placerat molestie, quam urna mollis eros, eget pellentesque tellus nisi sit amet ligula. 
    </div> 
    <div class = "middle"> 
     MIDDLE 
    </div> 
    <div class = "right"> 
     Mauris dapibus bibendum luctus. Nulla finibus nulla eu felis dignissim blandit. 
    </div> 
</div> 

CSS:

.container { 
    display: table; 
    width: 100%; 
    outline: 1px solid gray; 
} 

.container > .left, 
.container > .right { 
    display: table-cell; 
    width: 117px; 
    border: 1px dotted gray; 
} 

.container > .middle { 
    display: table-cell; 
    border: 1px dotted red; 
} 

Другим решением является использование Flexbox: http://jsfiddle.net/xrqyxnzg/.

CSS:

.container { 
    display: flex; 
} 

.container > .left, 
.container > .right { 
    flex: 0 0 117px; 
    border: 1px dotted gray; 
} 

.container > .middle { 
    flex: 1 1 auto; 
    border: 1px dotted red; 
} 

И третье (менее оптимальное) решение, которое рассматривает каждую коробку, как inline-block: http://jsfiddle.net/f64vj6dm/.

HTML: (изменен с целью устранения пробелов [т.е. возвращает])

<div class = "container"><div class = "left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, nulla sit amet placerat molestie, quam urna mollis eros, eget pellentesque tellus nisi sit amet ligula. 
    </div><div class = "middle"> 
     MIDDLE 
    </div><div class = "right"> 
     Mauris dapibus bibendum luctus. Nulla finibus nulla eu felis dignissim blandit. 
    </div> 
</div> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;  
} 

.container { 
    white-space: nowrap; 
} 

.container > .left, 
.container > .right { 
    border: 1px dotted gray; 
    width: 117px; 
    display: inline-block; 
    white-space: normal; 
    vertical-align: top; 
} 

.container > .middle { 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid red; 
    width: calc(100% - 117px * 2); 
}