<div class="wrap">
<div class="header">
		<h1 class="logo">Company Name</h1>
		<div class="navs">
				<ul class="topnav">
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
				</ul>
				<ul class="bottomnav">
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
						<li><a href="#">Test </a></li>
				</ul>
		</div>
</div>
<!-- end header -->
<div class="main">
		<h2>Main Content</h2>
		<p>As a patch of light colonies circumnavigated brain is the seed of intelligence, something incredible is waiting to be known preserve and cherish that pale blue dot cosmos. White dwarf vastness is bearable only through love, preserve and cherish that pale blue dot billions upon billions bits of moving fluff vanquish the impossible? Of brilliant syntheses radio telescope! Extraplanetary citizens of distant epochs? Orion's sword a mote of dust suspended in a sunbeam? Permanence of the stars, consciousness two ghostly white figures in coveralls and helmets are soflty dancing Flatland another world brain is the seed of intelligence from which we spring take root and flourish Tunguska event!</p>
</div>

html {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-moz-box-sizing: inherit;
	-webkit-box-sizing: inherit;
	-ms-box-sizing: inherit;
	box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body{line-height:1.5;}
ul {
	margin:0;
	padding:0;
	list-style:none;
}
.wrap {
	display:table;
	width:100%;
	height:100%;
	table-layout:fixed;
	max-width:980px;
	background:#ebebeb;
	margin:auto;
	border-collapse:collapse;
}
.header {
	background:#bfc8c7;
	/* 980px matches the max-width of the element - it can't be bigger than the element or the shadow moves away */
	box-shadow:  980px 0px 0px #bfc8c7, -980px 0px 0px #bfc8c7;
}
.logo {
	margin:0;
	background:green;
	width:150px;
	height:130px;
	float:left;
	margin:0 30px 0 0;
}
.logo img {
	width:100%;
	height:auto
}
.topnav {
	padding:35px 0;
	font-size:120%;
  line-height:26px;
}
.navs li {
	display:inline-block;
	margin:0 10px 0 0
}
.navs a {
	color:#000;
	text-decoration:none;
	display:block
}
.bottomnav {
	background:#9c005e;
	padding:6px 0;
	font-size:92%;
	color:#fff;
	/* 980px matches the max-width of the element - it can't be bigger than the element or the shadow moves away */
	-webkit-box-shadow: 980px 0px #9c005e, -980px 0px 0px #9c005e;
	-moz-box-shadow:   980px 0px 0px #9c005e, -980px 0px 0px #9c005e;
	box-shadow:        980px 0px 0px #9c005e, -980px 0px 0px #9c005e;
}
.bottomnav a {
	color:#fff;
}
.main {
	padding:10px;
}