<style>
@charset "utf-8";

body{

    margin: 0;
    background: #dfdfdf;

}
#Head1
{
	position:fixed;
	left:0px;
	top:0px;
}
#header1 {
	background-color:#161616;
	color:#f8f8f8;
	text-align:left; 
	padding:5px;
	height: 50px;
	width: 330px;
	float: left;
	position: absolute;
	left:0px;
	top:0px;
	background-image: linear-gradient(to bottom, #131313,rgba(37, 37, 37, 0.9),#131313);
	
}
#header2 {
	background-color:#161616;
	color:#f8f8f8;
	text-align:left; 
	padding:5px;
	height: 50px;
	width: 1100px;
	float: left;
	position:absolute;
	top:0px;
	left:330px;
	background-image: linear-gradient(to bottom, #131313,rgba(37, 37, 37, 0.9),#131313);
	
}
#picture{
	width: 1440px;
	height: 50px;
	background-color:#f9f9f9;

	color:black;
	padding:5px;
	position:absolute;
	top:100px;
	left:0px;
}
#pics{
	line-height:30px;
	background-color:#ededed;
	width: 750px;
	height: 50px;
	color:black;
	padding:5px;
	position:absolute;
	top:50px;
	left:0px;
	
}

#nav {
	line-height:30px;
	width: 690px;
	height: 50px;
	background-color:#ededed;
	color:black;
	padding:5px;	
	position:absolute;
	top:50px;
	left:750px;
	
}
#input{
	width: 1440px;
	height: 50px;
	box-shadow: 10px 10px 55px #2f2f2f;
}
#nav2 {
	line-height:30px;
	width: 130px;
	height: 810px;
	background-color:#f7f7f7;
	color:black;
	padding:5px;
	position:absolute;
	top:50px;
	left:0px;
	
}


#section {
	float:right;
	padding:10px;	    
	position:absolute;
	top:150px;
	left:60px;
	background-color: white;
}

#footer {
	background-color:black;
	height: 30px;
	width: 1440px;
	color:white;
	clear:both;
	text-align:center;
	padding:5px;	
	position:absolute;
	top:900px;
	left:0px;
}
			
</style>
<div id="Head1">Head1</div>
<div id="header1">header1</div>
<div id="header2">header2</div>
<div id="pics">pics</div>
<div id="nav">nav</div>
<div id="input">input</div>
<div id="nav2">nav2</div>
<div id="section">app</div>
<div id="footer">footer</div>