три ДИВ рядом друг с другом, середина должна быть 100%

Question

Я хочу сделать следующее, но я мог не могу выразить себя хорошо:

LEFT CONTENT |  IMAGEIMAGEIMAGE  | RIGHT CONTENT | 

-

LEFT CONTENT |     IMAGEIMAGEIMAGE     | RIGHT CONTENT | 

-

LEFT |     | RIGHT | 
CONTENT | IMAGEIMAGEIMAGE | CONTENT | 

- Таким образом, содержимое слева - справа должно иметь фиксированную ширину. Когда я сжимаю экран, а IMAGEIMAGEIMAGE не имеет места, тогда содержимое LEFT CONTENT и RIGHT должно быть разбито на строки.

<div style="background-color: yellow;"> 
<div id="a">break me new lines</div> 
<div id="b"><img src="http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Images-6.jpg" height="60" width="300"></div> 
<div id="c">break me new lines</div> 
</div> 

#a 
{ 
    float: left; 
    background-color: red; 
    width: 25%; 
    max-width: 140px; 
} 

#b 
{ 
    float: left; 
    width: 50%; 
    text-align: center; 
} 

#c 
{ 
    float: left; 
    background-color: blue; 
    width: 25%; 
    max-width: 140px; 
} 

div 
{ 
    height: 60px; 
} 

здесь what I tried

две проблемы:

1. все содержание обыкновение заполнить ширину 100%, как вы можете видеть
2. изображение идет под 3 колонки

Answer 1

это то, что я пытаюсь достичь:

http://jsfiddle.net/YkndN/

<div> 
<div style="display: table-cell; background-color: red; width: 48%;"> 
    left l l l lllll l l lllll ll 
</div> 
<div style="display: table-cell; width: 2%; background-color: blue; text-align: center;"> 
    centeredwhichmustcausebreak 
</div> 
<div style="display: table-cell; background-color: green; width: 48%; text-align: right;"> 
    right rrrrr r r r rrrrrrrrr rrr 
</div> 
</div> 

состояние закрыто :)

Answer 2

Вы должны удалить max-width с #a и #c, затем добавьте width в тег img внутри #b.

#a 
{ 
    float: left; 
    background-color: red; 
    width: 25%;  
} 

#b 
{ 
    float: left; 
    width: 50%; 
    text-align: center; 
} 

#c 
{ 
    float: left; 
    background-color: blue; 
    width: 25%;  
} 

div 
{ 
    height: 60px; 
} 
#b img{ 
    width:100%; 
} 

Fiddle Demo

Answer 3

1. Вы должны удалить максимальную ширину в #a и #c или вы можете использовать запросы средств массовой информации для отзывчивым http://www.w3.org/TR/css3-mediaqueries/

2. добавить

   #b img { ширина: 100%; }

Я думаю, что это будет лучше использовать структуру CSS для отзывчивого и ускорить DEVELOPPEMENT как система сетки twitter bootstrap

http://getbootstrap.com/css/#grid