Question: how to reduce the browser to reduce the div class = "three" from 600px to 300px, so that this block does not run into the central block

enter image description here

<style> .wrapper{ width: 100% } .one{ width: 240px; float: left; } .two{ margin-left:240px; margin-right:600px min-width: 720px; } .three{ max-width: 600px; min-width: 300px; float: right; } </style> </meta> </head> <body> <div class="wrapper"> <div class="one"> левый блок </div> <div class="two"> центральный блок </div> <div class="three"> правый блок </div> </div> </body>

    3 answers 3

    It is possible instead of float-elements to solve this problem by table mapping.

     .wrapper{ width: 100%; display: table; } .one{ width: 240px; display: table-cell; } .two{ display: table-cell; width: 720px; } .three{ max-width: 600px; min-width: 300px; display: table-cell; }

    Then the third column will pick the width itself, depending on the remaining width. If there are no restrictions on support for older versions, you can make a grid using flex https://html5book.ru/css3-flexbox/

      I think you should read about media queries http://htmlbook.ru/css/value/media

      Here are many examples of rubber layout http://htmlbook.ru/samlayout/tipovye-makety/rezinovyi-trekhkolonochnyi-maket
      Example 5.27 will work for you. Layout 5.2

      • and how will the media help? Make pixel by pixel - nonsense. Need a rubber layout - Proshka
      • Which of the blocks should you have a fixed size, and which should change? If both .two and .three change their size, should they be set to width in%? - Dmitry Matvienko
      • @Proshka, so just count how much width you should occupy on the screen as a percentage of the block, that's all. And with media queries, it is possible to give rubber to the block, so the answer is more or less normal - Klimenkomud
      • @Proshka And if you know that you just need to give the width of the block as a percentage - why go to SO for an answer that you know? Or you can not calculate what percentage of 240px, 300px 720px, 600px from the desktop format? - Klimenkomud
      • See how the bootstrap works. They are the best in adaptive layout - Dmitry Matvienko

      Try to look in the direction of the layout of the page frame on the flexbox grid - http://paratapok.ru/frontend/5148_css3-flexbox/ or solve the problem through media requests. A large number of options, but you need to know what suits you best for your task.