<html>
<head>
	<style type="text/css">
	html {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	body {
		display: table;
		border: none;
		border-spacing: 0;
		margin: 0;
		height: 100%;
		width: 100%;
		background-color: red;
	}

	.body {
		display: table-row;
		border: none;
	}

	.body > div {
		display: table-cell;
		border: none;
		height: 100%;
		width: 50%;
                background-color: red;
	}

        div.cell1 {
		border: none;
		height: 100%;
		width: 100%;
		background-color: green;
	}
        
        div.cell2 {
		border: none;
		height: 50%;
		width: 100%;
		background-color: green;
	}
	</style>
</head>
<body>
<div style="position:absolute;right:0;top:0;width:50%;height:50%;background-color:green"></div>
<div class="body"><div><div class="cell1"></div></div><div><div class="cell2"></div></div></div>
</body>
</html>