Here is a technique for two div elements side by side inside the body, and takes up 100% height of the body, not using float technique.
CSS and HTML:
html,body{
height:100%;
width:100%;
}
body{
margin: 0 0 0 0;
padding:0 0 0 0;
}
div{
box-sizing: border-box;-moz-box-sizing: border-box;
height:100%;
display: inline-block;
}
body > div:first-child{
width:80%;
border:solid 2px green;
}
body > div:nth-child(2){
width:20%;
border:solid 2px blue;
}
Note: for it to work, no whitespace between the div elements.
<body>
<div>AAA</div><div>BBB</div>
</body>
Check out these links for div side by side for alternative methods:
http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css[
^]
http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display[
^]
Side by side no float:
http://stackoverflow.com/questions/3619233/div-side-by-side-without-float[
^]