Layout 2 Colunas Fixas

Layout HTML/CSS com 2 colunas fixas e dividas por porcentagem na tela.

by Rômulo Bastos

HTML

<div id="container">
  <!-- esquerda -->
  <div id="divEsquerda">
    <h1>Conteúdo da Esquerda pode ser gigante</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
  </div>
  
  <!-- direita -->
  <div id="divDireita">
    <h1>Conteúdo da Direita pode ser gigante também</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
  </div>
</div>

CSS

* { 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; }