2column_layout_with_inline_block.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>VFM</title>
    <style type="text/css">
    	body{
    		margin: 0;
    	}
    	.header, .footer{
    		font-size: 3em;
				height: 10vh;
				text-align: center;
    	}
    	.header{
				background: #333;
				color: #CCC;
    	}
    	.footer{
				background: #CCC;
				color: #333;
    	}
    	.main{
    		height: 80vh;
    		/*border: 5px solid red;*/
    		box-sizing: border-box;
    	}
    	.left{
    		display: inline-block;
    		vertical-align: top;
    		width: 30%;
    		height: 100%;
    		background: #fcc;
    	}
    	.right{
    		display: inline-block;
    		vertical-align: top;
    		width: 70%;
    		height: 80vh;
    		margin-left: -0.25em;
    		background: #ccf;
    		opacity: 0.5;
    	}

    </style>
</head>
<body>
	<div class="header">header</div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer">footer</div>
</body>
</html>