This is the <header>.

Left sidebar

The beauty of laying out the page using CSS table values is you can switch them to something else for Responsive design. Make the page more narrow to check that out.

HTML
<body>
	<header>
		<h1>This is the header.</h1>
	</header>
	<div id="main">
		<section class="leftSidebar">Left sidebar</section>
		<section>
			<p>This is the main content area.</p>
		</section>
		<section class="rightSidebar">Right sidebar.</section>
	</div>
	<footer>
		<p>This is the footer.</p>
	</footer>
</body>
CSS
html {
	height: 100%;
}
body, #main {
	display: table;
	height: 100%;
	width: 100%;
}
header, footer {
	display: table-row;
	background-color: gainsboro;
	padding: 1em 2em;
	height: 1px; /* Give a small height otherwise it will attempt to make equal height rows, which would be way to tall. */
}
section {
	display: table-cell;
}
.leftSidebar, .rightSidebar {
	width: 10em;
	background-color: lightGreen;
}

Right sidebar.