We have two columns, the left one for example is 250px, the right one depends on the window size, for example up to 900px the right column is 600px, if the window size is over 1100px the size of the right column is 900px. Without using JS, etc. I can not figure it out myself.

PS I forgot to clarify completely, that the right column would not float. Those. its size is either 600px or 900px, with no intermediate values. As in CSS frameworks. They do not advise, because doing self-education.

    3 answers 3

    You can use media queries. You can set the conditions under which a particular block will take on certain styles. In your example, if the window width is 1100px, then the left block is 250px and the right one is 900 pixels, but it turns out that it will not fit, since 900 + 250 = 1150 pixels and the right block will be on a new line. The main thing is that you understand, you can set in%, as in previous examples, and if you need a specific width, then use media queries

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <style> .div-1 { float: left; height: 500px; width: 250px; background-color: black; } .div-2 { /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ */ width: 500px; float: left; height: 500px; background-color: orange; } /* Когда ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π° Π΄ΠΎ 900 пиксСлСй, ΡˆΠΈΡ€ΠΈΠ½Π° div-2 Π±ΡƒΠ΄Π΅Ρ‚ 600px */ @media screen and (max-width: 900px){ .div-2 { width: 600px; } } /* Когда ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π° ΠΎΡ‚ 1100 пиксСлСй, ΡˆΠΈΡ€ΠΈΠ½Π° div-2 Π±ΡƒΠ΄Π΅Ρ‚ 900px */ @media screen and (min-width: 1100px){ .div-2 { width: 900px; } } </style> 

     <body> <div class="div-1"></div> <div class="div-2"></div> </body>

    • answered beautifully! but it wouldn’t be TAKING YOUR ATAS - user33274
    • And what's wrong with "you"? I read the answer, it looks as if my acquaintance directly explains how to solve the problem)) all the rules, the main thing that helped) - Eugene

    You can use CSS. Inserted into HTML. The example below is responsive design. The column takes up 66% of the window width. The minimum value is 600px, and the maximum is 900px. In intermediate values, it is floating to the window size.

     <style media="all"> #element { width: 66%; max-width: 900px; min-width: 600px; } </style>

      try this

      left {

       width: 250px;

      }

      right {

       width: -webkit-calc(100% - 250px); width: -moz-calc(100% - 250px); width: calc(100% - 250px);

      }