Untitled

<!DOCTYPE html>
<html>
<head>
	<style>
    	div {
        	width: 100%;
		}

        div.table {
        	display: table;
		}
        div.table-row {
        	display: table-row;
		}
        div.table-cell {
        	display: table-cell;
		}


        div#header {
        	background-color: blue;
        }
        div#mid {
        	padding: 20px;
        }
        div#footer {
        	background-color: blue;
        }
        div#menu {
        	width: 30%;
		}
        div#content {
        	width: 70%;
		}
    </style>
</head>
<body>
<div id="page" class="table">
	<div class="table-row" id="header">
    	<div class="table-cell">Header</div>
    </div>
    <div class="table-row">
        <div class="table-cell" id="mid">
            <div class="table"  style="background-color: red">
            	<div class="table-row">
                	<div id="menu" class="table-cell">HMenu</div>
                    <div id="content" class="table-cell">Content</div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-row" id="footer">
        <div class="table-cell">Footer</div>
    </div>
</div>


</body>
</html>