How to Create A html Page with Alignments
Code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout 1-from Chidre'sTechTutorials </title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:Arial;
}
#logo-div
{
width:100%;
min-height:50px;
background-color:lightgray;
padding-left:2%;
line-height:50px;
margin-bottom:10px;
}
#nav-div
{
width:100%;
min-height:30px;
background-color:lightgray;
text-align:center;
line-height:30px;
margin-bottom:10px;
}
#header-banner-div
{
width:100%;
min-height:100px;
background-color:lightgray;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
#main-div
{
width:100%;
margin-bottom:10px;
}
#sidebar-div
{
width:20%;
min-height:400px;
background-color:lightgray;
float:left;
text-align:center;
line-height:400px;
}
#bodyarea-div
{
width:75%;
min-height:400px;
background-color:lightgray;
float:right;
text-align:center;
line-height:400px;
}
.clearfix::after
{
content:"";
display:block;
clear:both;
}
#footer-div
{
width:100%;
min-height:50px;
background-color:lightgray;
text-align:center;
line-height:50px;
}
#wrapper-div
{
width:80%;
background-color:;
margin:auto;
}
</style>
</head>
<body>
<div id="wrapper-div">
<div id="logo-div">
Logo
</div>
<div id="nav-div">
Navigation
</div>
<div id="header-banner-div">
Header/Banner
</div>
<div id="main-div" class="clearfix">
<div id="sidebar-div">
Side Bar
</div>
<div id="bodyarea-div">
Body Area
</div>
</div>
<div id="footer-div">
Footer
</div>
</div>
</body>
</html>