Hello. I have such a question. There are two divas:

.menuLeft { background: #2980b9; padding: 15px; width: 210px; margin-top: 5px; margin-left: 5px; float: left; border-radius: 5px 5px 0px 0px; font-weight: bold; color: #fff; } .menuRight { background: #3498db; padding: 15px; width: 1075px; margin-top: 5px; margin-right: 5px; float: right; border-radius: 5px 5px 0px 0px; font-weight: bold; color: #fff; }

as you already understood, these are two blocks, one is displayed on the left, the other on the right. I bring them simply: echo '<div class="menuLeft">Левое меню</div>'; echo '<div class="menuRight">Правое меню</div>'; it is necessary that the blocks were "rubber", namely, if the user has a smaller monitor, then so that the blocks do not lie on each other or so that they do not move out. How to implement this?

    3 answers 3

    Hello! I suggest wrapping your blocks with another wrapper. Which sets the width to 100%.

    for your left block, you write the width in percent, for example, 30%, for the right block, respectively, 70%.

    For the left block - position position:fixed; right - position: relative;

    and pull :)

    Code: https://jsfiddle.net/dj0krho6/

     <div class="wrapper"> <div class="menuLeft">Левое меню</div> <div class="menuRight">Правое меню</div> </div>

    css:

     .menuLeft { background: #2980b9; padding: 15px; width: 30%; margin: 5px 0 0 5px; float: left; border-radius: 5px 5px 0px 0px; font-weight: bold; color: #fff; position: absolute; } .menuRight { background: #3498db; padding: 15px; width: 70%; margin: 5px 5px 0 0; float: right; border-radius: 5px 5px 0px 0px; font-weight: bold; color: #fff; position: relative; }
    • fixed tie the position of the blocks to the screen, not to the page. Absolute is more correct. - toxxxa
    • Yes, I agree. Thank. - Anna Sushchenko

    Try setting the width in percent.

    • one
      tried - when zooming in, the right block moves down below the left - iKey
    • Consider padding or list the box-sizing property of blocks: border-box; then the width will be padding and border, but the margin will need to be taken into account. - Nikolay Batashov

    Instead of float set both position: absolute blocks, then left left: 0px right, respectively right: 0px . Width of blocks in percent to taste, and so that they do not clasp each other, add another <div> above them:

     <div class="menu"> <div class="menuLeft">Левое меню</div> <div class="menuRight">Правое меню</div> <div> .menu { width: 100%; min-width: 300px; /* подобрать правильную минимальную ширину, в зависимости от установок ширины левого и правого блоков */ }