How to prevent a div from leaving the page, when another div resizes?

Question

How to prevent a div from leaving the page, when another div resizes?

Navigation

#1 by (2 votes)

1

My page basically has two divs , one right and one left, the two are with style="position: fixed;" , that is, if I scroll the page, these two divs are side by side, fixed, always visible.

But when the div of the left receives text, it changes its size becomes wider. This "pushes" div from the right even further to the right and consequently out of the browser window. Soon, some of its content can no longer be seen.

How to make the div of the right have its right edge smaller than the limit of the browser window, such as making this div get thinner and "leaner", preventing it from "leaking" screen?

javascript html css div

asked by anonymous 10.03.2016 / 06:26

1 answer

Show div onclick regardless of clicked button C file manipulation (skip lines)

score 2 · Accepted Answer

Hello, Roberval !

Use the box-sizing lock sizes with the percentage you want. See Tips in CSS Tricks

I put it in the JSFiddle to be able to test it too! JSFiddle | https://jsfiddle.net/romulobastos/awnonopr/

Follow the code:

* { margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; }
    h1 { font-size: 21px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); }
    #container {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #divEsquerda, #divDireita {
      position: fixed;
    	height: 100%;
      top: 0;
      bottom: 0;
      padding: 2%;
      color: #fff;
      overflow: auto;
      -webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;  
    }
    #divEsquerda{ width: 30%; background: #246; left: 0; }
    #divDireita { width: 70%; background: #369; right: 0; }

<div id="container">
      <!-- esquerda -->
      <div id="divEsquerda">
        <h1>Conteúdo da Esquerda</h1>
        <p>...</p>
      </div>
      
      <!-- direita -->
      <div id="divDireita">
        <h1>Conteúdo da Direita</h1>
        <p>...</p>    
      </div>
    </div>

Hugs!