CSS Layout How to - Place a DIV with two DIVs inside it so the DIV fills 90% of screen

Question

We would like to know how to place a DIV with two DIVs inside it so the DIV fills 90% of screen.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; }
.content { position:absolute; width:50%; height:100%; }
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; }
</style><!--  w w  w .  j  a  va 2  s  .  co m-->
</head>
<body>
  <div id="outer">
    <div class="content left">xx</div>
    <div class="content right">xx</div> 
</div>
  
</body>
</html>

The code above is rendered as follows: