<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
margin:0px;
padding:0px;
}
.wrap{
width:960px;
height:auto;
border:1px solid red;
}
.header{
height:100px;
background: #21618c;
}
.nav{
height:50px;
background: #1abc9c;
}
.container{
background: #f9e79f ;
}
.left{
width:30%;
height:250px;
float:left;
background: #f39c12 ;
}
.right{
width:70%;
height:250px;
float:left;
}
.clear{
clear:both; // Clear Both will clear floating from both sides.
}
.footer{
height:80px;
background: #1abc9c;
}
</style>
<head>
<body>
<FONT COLOR="WHITE">
<div class="wrap">
<div class="header"><p> THIS IS HEADER <p align = "middle"><a href=index.html>HOME</a> |
<a href=contact.html>CONTACT</a> |
<a href=about.html>ABOUT</a></p></p></div>
<div class="nav"></div>
<div class="container">
<div class="left"><p> THIS IS LEFT CONTAINER</p> </div>
<div class="right"><p> THIS IS RIGHT CONTAINER</p></div>
<div class="clear"></div>
</div>
<div class="footer"> <p> THIS IS FOOTER</p></div>
</div>
</div>
</FONT>
</body>
</html>
