I can not make the .d3 block .d3 to min-width , and only then be transferred to a new line. Now it is not narrowed, but immediately transferred. What to add / change?

 <!DOCTYPE html> <html><head><meta charset="UTF-8"> </head><body> <style> #d1{ min-width: 480px; max-width: 1200px; border:solid green 2px; } #d2{ float:left; width:480px; border:2px solid black } #d3{ float:left; min-width:100px; border:2px solid red; word-wrap: break-word; } #d4{ clear:both; } </style> <div id="d1"> <div id="d2">Лево</div> <div id="d3">Центр Центр Центр Центр Центр Центр Центр Центр Центр Центр Центр Центр</div> <div id="d4"></div> Право Право Право Право Право Право Право </div> </body></html>

  • Thanks, it works as it should. But such a question. It turned out like a crutch. Why in my version of div3 does not want to shrink? Features css? - user193682
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). If you have a new question, ask it using the " Ask a Question " button. If you need to specify the context, give a link to this question. - Nicolas Chabanovsky ♦

1 answer 1

 * { padding: 0; margin: 0; box-sizing: border-box; } #wrap { min-width: 480px; max-width: 1200px; border: solid green 2px; font-size: 0; } #wrap > div { display: inline-block; vertical-align: top; font-size: 14px; padding: 10px; } #wrap > .div1 { width: 480px; border: 2px solid black } #wrap > .div2 { width: calc(100% - 480px); min-width: 100px; border: 2px solid red; word-wrap: break-word; } #wrap > .div3 { display: block; } 
 <div id="wrap"> <div class="div1">Лево</div> <div class="div2">Центр Центр Центр Центр Центр Центр Центр Центр Центр Центр Центр Центр</div> <div class="div3">Право Право Право Право Право Право Право</div> </div>

http://jsfiddle.net/soledar10/pd5pn0t3/

Reply from the comment @ soledar10 .