Algunas características de tu hoja de estilos no me gustaron, ahora bien, te comparto algo que hice para ti:
Código HTML:
<html>
<head>
<style media = 'screen' type = 'text/css'>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 50%;
font-size: 0px;
}
.Right {
display: inline-block;
width: 50%;
height: 30%;
background-color: red;
}
.Left {
display: inline-block;
width: 50%;
height: 30%;
background-color: green;
}
.Bottom {
width: 100%;
height: 30%;
background-color: purple;
}
</style>
<title></title>
</head>
<body>
<div id = 'container'>
<div class = 'Right'>
</div>
<div class = 'Left'>
</div>
<div class = 'Bottom'>
</div>
</div>
</body>
</html> Espero te sirva.
Buena suerte.